├── .github ├── FUNDING.yml └── ISSUE_TEMPLATE │ ├── bug-report.md │ └── new-style.md ├── .gitignore ├── CODE_OF_CONDUCT.md ├── LICENSE ├── README.md ├── example ├── package.json ├── public │ ├── favicon.png │ ├── index.html │ ├── manifest.json │ ├── react_border_wrapper_example.png │ ├── react_border_wrapper_icon.png │ ├── react_border_wrapper_logo.png │ └── react_border_wrapper_logo_white.png ├── src │ ├── App.js │ ├── Content.js │ ├── index.css │ └── index.js └── yarn.lock ├── package.json ├── rollup.config.js ├── src ├── index.tsx ├── styles.css └── typings.d.ts ├── tsconfig.json ├── tsconfig.test.json └── yarn.lock /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [metroxe] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: # Replace with a single Patreon username 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: # Replace with a single Ko-fi username 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: #https://www.paypal.me/christopherp 13 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Add a new Bug 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | Describe the problem here 12 | 13 | **Props to Reproduce** 14 | ```jsx 15 | 18 | // Content 19 | 20 | ``` 21 | 22 | **Screenshots** 23 | Take a screenshot of the style in the playground 24 | 25 | **Additional context (Optional)** 26 | Add any other context about the problem here. 27 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/new-style.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: New style 3 | about: Add a new style 4 | title: '' 5 | labels: new style 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Name of the style** 11 | A nice style name. 12 | 13 | **Props to reproduce** 14 | 15 | ```jsx 16 | 19 | // Content 20 | 21 | ``` 22 | 23 | **Screenshots** 24 | Take a screenshot of the style in the playground 25 | 26 | **Additional context (Optional)** 27 | Add any other context here. 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # dependencies 2 | node_modules 3 | 4 | # builds 5 | build 6 | dist 7 | .rpt2_cache 8 | 9 | # misc 10 | .DS_Store 11 | .env 12 | .env.local 13 | .env.development.local 14 | .env.test.local 15 | .env.production.local 16 | .idea 17 | 18 | npm-debug.log* 19 | yarn-debug.log* 20 | yarn-error.log* 21 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at chrispow96@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Christopher Powroznik 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![React Border Wrapper Logo](https://metroxe.github.io/react-border-wrapper/react_border_wrapper_logo.png)](https://metroxe.github.io/react-border-wrapper/) 2 | 3 | [![NPM](https://img.shields.io/npm/v/react-border-wrapper.svg)](https://www.npmjs.com/package/react-border-wrapper) 4 | [![NPM](https://img.shields.io/npm/dt/react-border-wrapper.svg)](https://www.npmjs.com/package/react-border-wrapper) 5 | [![Github Issues](https://img.shields.io/github/issues/metroxe/react-border-wrapper.svg)](https://github.com/Metroxe/react-border-wrapper/issues) 6 | 7 | ### [Test in Browser](https://metroxe.github.io/react-border-wrapper/) 8 | 9 | 10 | ![Example](https://metroxe.github.io/react-border-wrapper/react_border_wrapper_example.png) 11 | 12 | ## Installation 13 | 14 | ### npm 15 | ```bash 16 | npm install react-border-wrapper 17 | ``` 18 | 19 | ### yarn 20 | ```bash 21 | yarn add react-border-wrapper 22 | ``` 23 | 24 | ## Usage 25 | 26 | Use the border wrapper in the same way you would use a `
`. 27 | 28 | ```tsx 29 | import * as React from 'react' 30 | import BorderWrapper from 'react-border-wrapper' 31 | 32 | class Example extends React.Component { 33 | render () { 34 | return ( 35 | 36 | // Content 37 | 38 | ) 39 | } 40 | } 41 | ``` 42 | 43 | ## Props 44 | 45 | | Prop | Type | Description | 46 | | --- | :---: | --- | 47 | | `innerPadding` | `string` `number` | Padding around the children on each edge. 48 | | `borderWidth` | `string` `number` | Width of the border. 49 | | `borderRadius` | `string` `number` | Radius of each corner. This radius is added on top of the inner padding. Thus, a large radius will create a large distance between the top and bottom borders. 50 | | `borderColour` | `string` | CSS compatible string for the border colour 51 | | `borderType` | `string` | CSS compatible `LineStyle` string to change the border drawing style 52 | | `topElement` `rightElement` `bottomElement` `leftElement` | `Element` | JSX Element to be rendered at the specified side. If an element is not specified then all prop values for that side will be ignored. 53 | | `topPosition` `rightPosition` `leftPosition` `rightPosition` | `number` | A number between `0` and `1` to indicate a precentage (`0%` to `100%`) of where the component will be placed along the sides. Values greater than `1` or less than `0` will be at `1` and `0` respectively. 54 | | `topOffset` `rightOffset` `leftOffset` `rightOffset` | `string` `number` | Offset the component on the given side by this value. Use this to help center or position each component to your desired location. 55 | | `topGap` `rightGap` `bottomGap` `leftGap` | `string` `number` | Distance between the border and the position of the component to be rendered. 56 | 57 | ## Playground 58 | Use the following link to play around with the props and find a proper style. It is highly encouraged to export the props and either [report an issue](https://github.com/Metroxe/react-border-wrapper/issues/new?assignees=&labels=bug&template=bug-report.md&title=) with them or [submit them as a style](https://github.com/Metroxe/react-border-wrapper/issues/new?assignees=&labels=new+style&template=new-style.md&title=) to be used by other users. 59 | 60 | [https://metroxe.github.io/react-border-wrapper/](https://metroxe.github.io/react-border-wrapper/) 61 | 62 | ## License 63 | 64 | MIT © [Christopher Powroznik](https://github.com/Metroxe) 65 | -------------------------------------------------------------------------------- /example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-border-wrapper-example", 3 | "homepage": "https://Metroxe.github.io/react-border-wrapper", 4 | "version": "0.0.0", 5 | "license": "MIT", 6 | "private": true, 7 | "dependencies": { 8 | "@material-ui/core": "^3.9.2", 9 | "@material-ui/icons": "^3.0.2", 10 | "@material-ui/lab": "^3.0.0-alpha.30", 11 | "bootstrap": "^4.3.1", 12 | "prop-types": "^15.6.2", 13 | "react": "^16.4.1", 14 | "react-border-wrapper": "link:..", 15 | "react-dom": "^16.4.1", 16 | "react-scripts": "^1.1.4" 17 | }, 18 | "scripts": { 19 | "start": "react-scripts start", 20 | "build": "react-scripts build", 21 | "test": "react-scripts test --env=jsdom", 22 | "eject": "react-scripts eject" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /example/public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Metroxe/react-border-wrapper/cdc5c3e97bbfb37428c6765233ebef3da930385d/example/public/favicon.png -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | React Border Wrapper 13 | 14 | 15 | 16 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /example/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "react-border-wrapper", 3 | "name": "react-border-wrapper", 4 | "start_url": "./index.html", 5 | "display": "standalone", 6 | "theme_color": "#000000", 7 | "background_color": "#ffffff" 8 | } 9 | -------------------------------------------------------------------------------- /example/public/react_border_wrapper_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Metroxe/react-border-wrapper/cdc5c3e97bbfb37428c6765233ebef3da930385d/example/public/react_border_wrapper_example.png -------------------------------------------------------------------------------- /example/public/react_border_wrapper_icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Metroxe/react-border-wrapper/cdc5c3e97bbfb37428c6765233ebef3da930385d/example/public/react_border_wrapper_icon.png -------------------------------------------------------------------------------- /example/public/react_border_wrapper_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Metroxe/react-border-wrapper/cdc5c3e97bbfb37428c6765233ebef3da930385d/example/public/react_border_wrapper_logo.png -------------------------------------------------------------------------------- /example/public/react_border_wrapper_logo_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Metroxe/react-border-wrapper/cdc5c3e97bbfb37428c6765233ebef3da930385d/example/public/react_border_wrapper_logo_white.png -------------------------------------------------------------------------------- /example/src/App.js: -------------------------------------------------------------------------------- 1 | import React, {Component} from "react"; 2 | import BorderWrapper from "react-border-wrapper"; 3 | import AppBar from "@material-ui/core/AppBar"; 4 | import Toolbar from "@material-ui/core/Toolbar"; 5 | import Paper from "@material-ui/core/Paper"; 6 | import TextField from "@material-ui/core/TextField"; 7 | import InputAdornment from "@material-ui/core/InputAdornment"; 8 | import CssBaseline from "@material-ui/core/CssBaseline"; 9 | import MenuItem from "@material-ui/core/MenuItem"; 10 | import {LargeContent, MediumContent, SmallContent} from "./Content"; 11 | import Button from "@material-ui/core/Button"; 12 | 13 | export default class App extends Component { 14 | 15 | state = { 16 | topPosition: 0.05, 17 | rightPosition: 0.1, 18 | bottomPosition: 0.9, 19 | leftPosition: 0.9, 20 | topOffset: 22, 21 | rightOffset: 22, 22 | bottomOffset: 22, 23 | leftOffset: 22, 24 | topGap: 4, 25 | rightGap: 4, 26 | bottomGap: 4, 27 | leftGap: 4, 28 | showTop: true, 29 | showLeft: false, 30 | showRight: true, 31 | showBottom: false, 32 | colour: "#00bcf1", 33 | borderWidth: 5, 34 | innerPadding: 30, 35 | borderRadius: 15, 36 | borderType: "solid", 37 | content: "medium" 38 | }; 39 | 40 | horizontalImage = ( 41 |
42 | react border wrapper logo 47 |
48 | ); 49 | 50 | verticalImage = ( 51 |
52 | react border wrapper icon 57 |
58 | ); 59 | 60 | createOnChange = (key) => { 61 | return (event) => { 62 | this.setState({[key]: event.target.value}); 63 | }; 64 | }; 65 | 66 | render() { 67 | 68 | return ( 69 | 70 | 71 | 72 | 73 | react border wrapper 78 |
79 | 86 | 93 | 100 | 101 | 102 | 103 | 104 | 131 | {this.state.content === "large" ? : this.state.content === "medium" ? 132 | : } 133 | 134 | 135 | 136 | 137 | 138 | 147 | Small 148 | Medium 149 | Large 150 | 151 | # 160 | }} 161 | /> 162 | px 171 | }} 172 | /> 173 | px 182 | }} 183 | /> 184 | px 193 | }} 194 | /> 195 | 204 | Dashed 205 | Dotted 206 | Double 207 | Groove 208 | Hidden 209 | Inset 210 | None 211 | Outset 212 | Ridge 213 | Solid 214 | 215 | 224 | 225 | True 226 | 227 | 228 | False 229 | 230 | 231 | 240 | 241 | True 242 | 243 | 244 | False 245 | 246 | 247 | 256 | 257 | True 258 | 259 | 260 | False 261 | 262 | 263 | 272 | 273 | True 274 | 275 | 276 | False 277 | 278 | 279 | % 288 | }} 289 | /> 290 | % 299 | }} 300 | /> 301 | % 310 | }} 311 | /> 312 | % 321 | }} 322 | /> 323 | px 332 | }} 333 | /> 334 | px 343 | }} 344 | /> 345 | px 354 | }} 355 | /> 356 | px 365 | }} 366 | /> 367 | px 376 | }} 377 | /> 378 | px 387 | }} 388 | /> 389 | px 398 | }} 399 | /> 400 | px 409 | }} 410 | /> 411 | 412 | 413 | 414 |
415 | 416 | {` 417 |  {`borderColour="${this.state.colour}"`}
418 |  {`borderWidth="${this.state.borderWidth}px"`}
419 |  {`borderRadius="${this.state.borderRadius}px"`}
420 |  {`borderType="${this.state.borderType}"`}
421 |  {`innerPadding="${this.state.innerPadding}px"`}
422 | 423 | {this.state.showTop && ( 424 | 425 |  {`topElement={topElement}`}
426 |  {`topPosition={${this.state.topPosition}}`}
427 |  {`topOffset="${this.state.topOffset}px"`}
428 |  {`topGap="${this.state.topGap}px"`}
429 | 430 | )} 431 | 432 | {this.state.showRight && ( 433 | 434 |  {`rightElement={rightElement}`}
435 |  {`rightPosition={${this.state.rightPosition}}`}
436 |  {`rightOffset="${this.state.rightOffset}px"`}
437 |  {`rightGap="${this.state.rightGap}px"`}
438 | 439 | )} 440 | 441 | {this.state.showBottom && ( 442 | 443 |  {`bottomElement={bottomElement}`}
444 |  {`bottomPosition={${this.state.bottomPosition}}`}
445 |  {`bottomOffset="${this.state.bottomOffset}px"`}
446 |  {`bottomGap="${this.state.bottomGap}px"`}
447 | 448 | )} 449 | 450 | {this.state.showLeft && ( 451 | 452 |  {`leftElement={leftElement}`}
453 |  {`leftPosition={${this.state.leftPosition}}`}
454 |  {`leftOffset="${this.state.leftOffset}px"`}
455 |  {`leftGap="${this.state.leftGap}px"`}
456 | 457 | )} 458 | >
459 | {``}
460 | 461 |
462 | 463 | 464 | ); 465 | } 466 | } 467 | -------------------------------------------------------------------------------- /example/src/Content.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const LargeContent = () => { 4 | return ( 5 |
6 |

Title

7 |

Header

8 |

9 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum dapibus porta. Donec non elit 10 | id mauris imperdiet gravida ut eu tortor. Aenean aliquam facilisis ipsum, id fringilla magna commodo 11 | sed. Donec vel quam scelerisque purus consequat mollis eu cursus ante. Aenean eros ipsum, sollicitudin 12 | nec neque sed, venenatis finibus erat. Mauris et ante vel eros venenatis feugiat eu vitae magna. 13 | Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus cursus 14 | orci in dignissim efficitur. Nunc volutpat orci sit amet bibendum dapibus. 15 |

16 |

Sub-Heading

17 |

18 | Morbi feugiat neque ut ligula euismod viverra. Pellentesque ante massa, ultrices a vehicula vel, 19 | suscipit quis tellus. Praesent placerat mollis magna, ac vehicula risus placerat ut. Donec 20 | porttitor 21 | nisl vel facilisis rhoncus. Sed a consectetur nisi. Aliquam erat volutpat. Nam sed ligula dolor. 22 | Proin 23 | vel enim consectetur, interdum libero sed, vulputate est. Maecenas placerat mi massa, at congue 24 | erat 25 | convallis a. Suspendisse ut vestibulum lorem. Sed id molestie augue, ac commodo sem. Mauris 26 | viverra 27 | sem 28 | sed porta pharetra. 29 |

30 |

Sub-Heading

31 |

32 | Aliquam facilisis convallis congue. Phasellus et tortor facilisis, convallis orci nec, sodales 33 | libero. 34 | In eu ex erat. Curabitur magna ipsum, rutrum eget pulvinar in, dapibus vitae odio. Suspendisse 35 | pellentesque volutpat elit molestie facilisis. Praesent rhoncus, ante malesuada laoreet consequat, 36 | velit 37 | purus aliquet ex, ac porttitor ex turpis at odio. Morbi augue lacus, malesuada nec consectetur non, 38 | consectetur in mi. Ut nulla metus, commodo sed bibendum non, eleifend ac felis. Fusce finibus metus 39 | quis 40 | dolor dictum efficitur. Aenean ac lacus commodo, tempus lorem quis, lacinia ex. Nulla fringilla 41 | metus 42 | vitae sem convallis laoreet. Nunc massa justo, faucibus vitae nisi eu, facilisis aliquet nulla. 43 | Mauris 44 | ex enim, rhoncus scelerisque laoreet vel, euismod eu lorem. 45 |

46 | 47 |

Header

48 |

49 | In quam velit, semper et semper eu, posuere ut ex. Nam nunc metus, iaculis et malesuada in, iaculis 50 | id 51 | leo. Vivamus interdum dapibus diam, ac fermentum magna condimentum sed. Nam iaculis eros sit amet 52 | libero 53 | ullamcorper, in suscipit nisl pellentesque. Integer id nulla sit amet ligula pulvinar tincidunt eu 54 | in 55 | velit. Proin elementum arcu quis cursus cursus. Vestibulum quis libero orci. Phasellus nec 56 | consectetur 57 | elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. 58 | Proin eu enim quam. Fusce volutpat ipsum mi, ac accumsan sem aliquet in. 59 | 60 | Praesent efficitur ut libero a mattis. Donec urna diam, viverra ut nisl et, condimentum ultricies 61 | sapien. Aenean nec felis sit amet ipsum placerat posuere. Nam id nulla molestie, ultricies sem ut, 62 | bibendum lectus. Sed pellentesque sapien sed bibendum tempor. Sed a tincidunt diam. Etiam nunc sem, 63 | luctus quis risus ut, hendrerit scelerisque tellus. Sed ac lacinia tortor, fermentum tempus velit. 64 | Mauris eu diam tempor, sollicitudin risus et, euismod dui. Nunc feugiat ut magna sed tempus. Class 65 | aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam risus 66 | augue, 67 | ullamcorper non dolor in, tristique sagittis justo. 68 |

69 |
70 | ); 71 | }; 72 | 73 | export const MediumContent = () => { 74 | return ( 75 |
76 |

Title

77 |

Header

78 |

79 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum dapibus porta. Donec non elit 80 | id mauris imperdiet gravida ut eu tortor. Aenean aliquam facilisis ipsum, id fringilla magna commodo 81 | sed. Donec vel quam scelerisque purus consequat mollis eu cursus ante. Aenean eros ipsum, sollicitudin 82 | nec neque sed, venenatis finibus erat. Mauris et ante vel eros venenatis feugiat eu vitae magna. 83 | Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus cursus 84 | orci in dignissim efficitur. Nunc volutpat orci sit amet bibendum dapibus. 85 |

86 |

Sub-Heading

87 |

88 | Morbi feugiat neque ut ligula euismod viverra. Pellentesque ante massa, ultrices a vehicula vel, 89 | suscipit quis tellus. Praesent placerat mollis magna, ac vehicula risus placerat ut. Donec 90 | porttitor 91 | nisl vel facilisis rhoncus. Sed a consectetur nisi. Aliquam erat volutpat. Nam sed ligula dolor. 92 | Proin 93 | vel enim consectetur, interdum libero sed, vulputate est. Maecenas placerat mi massa, at congue 94 | erat 95 | convallis a. Suspendisse ut vestibulum lorem. Sed id molestie augue, ac commodo sem. Mauris 96 | viverra 97 | sem 98 | sed porta pharetra. 99 |

100 |
101 | ); 102 | }; 103 | 104 | export const SmallContent = () => { 105 | return ( 106 |
107 |

Title

108 |

109 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque bibendum dapibus porta. Donec non elit 110 | id mauris imperdiet gravida ut eu tortor. Aenean aliquam facilisis ipsum, id fringilla magna commodo 111 | sed. Donec vel quam scelerisque purus consequat mollis eu cursus ante. Aenean eros ipsum, sollicitudin 112 | nec neque sed, venenatis finibus erat. Mauris et ante vel eros venenatis feugiat eu vitae magna. 113 | Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus cursus 114 | orci in dignissim efficitur. Nunc volutpat orci sit amet bibendum dapibus. 115 |

116 |
117 | ); 118 | }; -------------------------------------------------------------------------------- /example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | 7 | .TextField { 8 | margin: 10px !important; 9 | width: 200px 10 | } -------------------------------------------------------------------------------- /example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | import './index.css' 5 | import App from './App' 6 | 7 | ReactDOM.render(, document.getElementById('root')) 8 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-border-wrapper", 3 | "version": "1.0.3", 4 | "description": "A wrapper for placing elements along div borders in React.", 5 | "author": "Metroxe", 6 | "license": "MIT", 7 | "repository": "Metroxe/react-border-wrapper", 8 | "main": "dist/index.js", 9 | "module": "dist/index.es.js", 10 | "keywords": ["react", "border wrapper", "div", "layout", "web design", "cool"], 11 | "jsnext:main": "dist/index.es.js", 12 | "engines": { 13 | "node": ">=8", 14 | "npm": ">=5" 15 | }, 16 | "scripts": { 17 | "test": "cross-env CI=1 react-scripts-ts test --env=jsdom", 18 | "test:watch": "react-scripts-ts test --env=jsdom", 19 | "build": "rollup -c", 20 | "start": "rollup -c -w", 21 | "prepare": "yarn run build", 22 | "predeploy": "cd example && yarn install && yarn run build", 23 | "deploy": "gh-pages -d example/build" 24 | }, 25 | "dependencies": {}, 26 | "peerDependencies": { 27 | "prop-types": "^15.5.4", 28 | "react": "^15.0.0 || ^16.0.0", 29 | "react-dom": "^15.0.0 || ^16.0.0" 30 | }, 31 | "devDependencies": { 32 | "@svgr/rollup": "^2.4.1", 33 | "@types/jest": "^23.1.5", 34 | "@types/react": "^16.3.13", 35 | "@types/react-dom": "^16.0.5", 36 | "babel-core": "^6.26.3", 37 | "babel-runtime": "^6.26.0", 38 | "cross-env": "^5.1.4", 39 | "gh-pages": "^1.2.0", 40 | "react": "^16.4.1", 41 | "react-dom": "^16.4.1", 42 | "react-scripts-ts": "^2.16.0", 43 | "rollup": "^0.62.0", 44 | "rollup-plugin-babel": "^3.0.7", 45 | "rollup-plugin-commonjs": "^9.1.3", 46 | "rollup-plugin-node-resolve": "^3.3.0", 47 | "rollup-plugin-peer-deps-external": "^2.2.0", 48 | "rollup-plugin-postcss": "^1.6.2", 49 | "rollup-plugin-typescript2": "^0.17.0", 50 | "rollup-plugin-url": "^1.4.0", 51 | "typescript": "^2.8.3" 52 | }, 53 | "files": [ 54 | "dist" 55 | ] 56 | } 57 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import typescript from 'rollup-plugin-typescript2' 2 | import commonjs from 'rollup-plugin-commonjs' 3 | import external from 'rollup-plugin-peer-deps-external' 4 | // import postcss from 'rollup-plugin-postcss-modules' 5 | import postcss from 'rollup-plugin-postcss' 6 | import resolve from 'rollup-plugin-node-resolve' 7 | import url from 'rollup-plugin-url' 8 | import svgr from '@svgr/rollup' 9 | 10 | import pkg from './package.json' 11 | 12 | export default { 13 | input: 'src/index.tsx', 14 | output: [ 15 | { 16 | file: pkg.main, 17 | format: 'cjs', 18 | exports: 'named', 19 | sourcemap: true 20 | }, 21 | { 22 | file: pkg.module, 23 | format: 'es', 24 | exports: 'named', 25 | sourcemap: true 26 | } 27 | ], 28 | plugins: [ 29 | external(), 30 | postcss({ 31 | modules: true 32 | }), 33 | url(), 34 | svgr(), 35 | resolve(), 36 | typescript({ 37 | rollupCommonJSResolveHack: true, 38 | clean: true 39 | }), 40 | commonjs() 41 | ] 42 | } 43 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react' 2 | import {CSSProperties, ReactNode} from 'react' 3 | import styles from './styles.css' 4 | import {LineStyle} from "csstype"; 5 | import * as PropTypes from "prop-types"; 6 | 7 | export type Props = { 8 | children?: ReactNode; 9 | style?: CSSProperties; 10 | 11 | innerPadding?: number | string; 12 | borderWidth?: number | string; 13 | borderRadius?: number | string; 14 | borderColour?: string; 15 | borderType?: LineStyle 16 | 17 | topElement?: ReactNode; 18 | topPosition?: number; 19 | topOffset?: string | number; 20 | topGap?: string | number; 21 | 22 | rightElement?: ReactNode; 23 | rightPosition?: number; 24 | rightOffset?: string | number; 25 | rightGap?: string | number; 26 | 27 | bottomElement?: ReactNode; 28 | bottomPosition?: number; 29 | bottomOffset?: string | number; 30 | bottomGap?: string | number; 31 | 32 | leftElement?: ReactNode; 33 | leftPosition?: number; 34 | leftOffset?: string | number; 35 | leftGap?: string | number; 36 | } 37 | 38 | type Positions = { 39 | top: boolean, 40 | right: boolean, 41 | bottom: boolean, 42 | left: boolean, 43 | topRight: boolean, 44 | bottomRight: boolean, 45 | bottomLeft: boolean, 46 | topLeft: boolean, 47 | } 48 | 49 | type PositionPercent = { 50 | primary?: string; 51 | secondary?: string; 52 | } 53 | 54 | function determineLocations({bottomElement, leftElement, topElement, rightElement}: Props): Positions { 55 | const top: boolean = topElement !== undefined; 56 | const right: boolean = rightElement !== undefined; 57 | const bottom: boolean = bottomElement !== undefined; 58 | const left: boolean = leftElement !== undefined; 59 | const topRight: boolean = top || right; 60 | const bottomRight: boolean = right || bottom; 61 | const bottomLeft: boolean = bottom || left; 62 | const topLeft: boolean = left || top; 63 | return {top, right, bottom, left, topRight, bottomRight, bottomLeft, topLeft} 64 | } 65 | 66 | function parsePercentage(float: number = 0.5): PositionPercent { 67 | if (float > 1) { 68 | float = 1; 69 | } else if (float < 0) { 70 | float = 0; 71 | } 72 | return {primary: Math.round(float * 100) + "%", secondary: Math.round((1 - float) * 100) + "%"} 73 | } 74 | 75 | type valueType = number | string | undefined 76 | 77 | const {ReactBorderWrapperParent, ReactBorderWrapperBorderVerticalParent, ReactBorderWrapperCorner, ReactBorderWrapperBorderHorizontalParent, ReactBorderWrapperBorderChildren, ReactBorderWrapperBorderRightElement} = styles; 78 | 79 | const ReactBorderWrapper: React.FunctionComponent = (props: Props): JSX.Element => { 80 | 81 | const positions: Positions = determineLocations(props); 82 | 83 | const undefinedPosition: PositionPercent = {primary: "50%", secondary: "50%"}; 84 | const topPosition: PositionPercent = positions.top ? parsePercentage(props.topPosition) : undefinedPosition; 85 | const rightPosition: PositionPercent = positions.right ? parsePercentage(props.rightPosition) : undefinedPosition; 86 | const bottomPosition: PositionPercent = positions.bottom ? parsePercentage(props.bottomPosition) : undefinedPosition; 87 | const leftPosition: PositionPercent = positions.left ? parsePercentage(props.leftPosition) : undefinedPosition; 88 | 89 | const topOffset: valueType = positions.top ? props.topOffset : undefined; 90 | const rightOffset: valueType = positions.right ? props.rightOffset : undefined; 91 | const bottomOffset: valueType = positions.bottom ? props.bottomOffset : undefined; 92 | const leftOffset: valueType = positions.left ? props.leftOffset : undefined; 93 | 94 | const topGap: valueType = positions.top ? props.topGap : undefined; 95 | const rightGap: valueType = positions.right ? props.rightGap : undefined; 96 | const bottomGap: valueType = positions.bottom ? props.bottomGap : undefined; 97 | const leftGap: valueType = positions.left ? props.leftGap : undefined; 98 | 99 | return ( 100 |
101 | 102 |
103 |
119 |
128 |
134 | {props.topElement} 135 |
136 |
145 |
161 |
162 | 163 |
164 | 165 |
166 |
175 |
182 | {props.leftElement} 183 |
184 |
193 |
194 | 195 |
198 | {props.children} 199 |
200 | 201 |
202 |
211 |
218 | {props.rightElement} 219 |
220 |
229 |
230 | 231 |
232 | 233 |
234 |
249 |
258 |
265 | {props.bottomElement} 266 |
267 |
276 |
291 |
292 |
293 | ) 294 | }; 295 | 296 | ReactBorderWrapper.propTypes = { 297 | children: PropTypes.element, 298 | style: PropTypes.object, 299 | innerPadding: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 300 | borderWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 301 | borderRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 302 | borderColour: PropTypes.string, 303 | borderType: PropTypes.string, 304 | topElement: PropTypes.element, 305 | topPosition: PropTypes.number, 306 | topOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 307 | topGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 308 | rightElement: PropTypes.element, 309 | rightPosition: PropTypes.number, 310 | rightOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 311 | rightGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 312 | bottomElement: PropTypes.element, 313 | bottomPosition: PropTypes.number, 314 | bottomOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 315 | bottomGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 316 | leftElement: PropTypes.element, 317 | leftPosition: PropTypes.number, 318 | leftOffset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 319 | leftGap: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), 320 | } as { [key in keyof Props]: any }; 321 | 322 | ReactBorderWrapper.defaultProps = { 323 | borderWidth: "4px", 324 | innerPadding: "20px", 325 | borderRadius: "15px", 326 | borderColour: "#000000", 327 | borderType: "solid", 328 | topOffset: "0px", 329 | rightOffset: "3px", 330 | bottomOffset: "0px", 331 | leftOffset: "3px", 332 | topGap: "0px", 333 | rightGap: "0px", 334 | bottomGap: "0px", 335 | leftGap: "0px", 336 | }; 337 | 338 | export default ReactBorderWrapper 339 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | h1 { 2 | font-size: 42pt; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | h2 { 8 | font-size: 24pt; 9 | } 10 | 11 | h3 { 12 | font-size: 12pt; 13 | } 14 | 15 | .ReactBorderWrapperParent { 16 | display: inline-block; 17 | } 18 | 19 | .ReactBorderWrapperBorderChildren { 20 | display: flex; 21 | flex-direction: row; 22 | } 23 | 24 | .ReactBorderWrapperBorderHorizontalParent { 25 | display: flex; 26 | flex-direction: row; 27 | } 28 | 29 | .ReactBorderWrapperBorderVerticalParent { 30 | display: flex; 31 | flex-direction: column; 32 | } 33 | 34 | .ReactBorderWrapperBorderBottomElement { 35 | align-self: flex-end; 36 | } 37 | 38 | .ReactBorderWrapperBorderRightElement { 39 | align-self: flex-end; 40 | } 41 | 42 | .ReactBorderWrapperCorner { 43 | display: flex; 44 | } -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * Default CSS definition for typescript, 3 | * will be overridden with file-specific definitions by rollup 4 | */ 5 | declare module '*.css' { 6 | const content: { [className: string]: string }; 7 | export default content; 8 | } 9 | 10 | interface SvgrComponent extends React.StatelessComponent> {} 11 | 12 | declare module '*.svg' { 13 | const svgUrl: string; 14 | const svgComponent: SvgrComponent; 15 | export default svgUrl; 16 | export { svgComponent as ReactComponent } 17 | } 18 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "outDir": "build", 4 | "module": "esnext", 5 | "target": "es5", 6 | "lib": ["es6", "dom", "es2016", "es2017"], 7 | "sourceMap": true, 8 | "allowJs": false, 9 | "jsx": "react", 10 | "declaration": true, 11 | "moduleResolution": "node", 12 | "forceConsistentCasingInFileNames": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "noImplicitAny": true, 16 | "strictNullChecks": true, 17 | "suppressImplicitAnyIndexErrors": true, 18 | "noUnusedLocals": false, 19 | "noUnusedParameters": false, 20 | "noStrictGenericChecks": false 21 | }, 22 | "include": ["src"], 23 | "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"] 24 | } 25 | -------------------------------------------------------------------------------- /tsconfig.test.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./tsconfig.json", 3 | "compilerOptions": { 4 | "module": "commonjs" 5 | } 6 | } --------------------------------------------------------------------------------