52
React Border Wrapper New Version 1.0.3
source link: https://www.tuicool.com/articles/3yUfEbj
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Test in Browser
Installation
npm
npm install --save react-border-wrapper
yarn
yarn add react-border-wrapper
Usage
Use the border wrapper in the same way you would use a <div>
.
import * as React from 'react' import BorderWrapper from 'react-border-wrapper' class Example extends React.Component { render () { return ( <BorderWrapper> // Content </BorderWrapper> ) } }
Props
Prop Type DescriptioninnerPadding
string
number
Padding around the children on each edge.
borderWidth
string
number
Width of the border.
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.
borderColour
string
CSS compatible string for the border colour
borderType
string
CSS compatible LineStyle
string to change the border drawing style
topElement
rightElement
bottomElement
leftElement
Element
JSX Element to be rendered sepcified side. If an element is not specified then all prop values for that side will be ignored.
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.
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.
topGap
rightGap
bottomGap
leftGap
string
number
Distance between the border and the position of the component to be rendered.
Playground
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 with them or submit them as a style to be used by other users.
https://metroxe.github.io/react-border-wrapper/
License
MIT © Christopher Powroznik
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK