Discover Metroxe/react-border-wrapper Open Source project

Test in Browser

Installation

npm

npm install 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	Description
`innerPadding`	`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 at the specified 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/

Metroxe/react-border-wrapper

Metroxe

Reviews

Repository Details