Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including react-border-wrapper with all npm packages installed. Try it out:

require("prop-types/package.json"); // prop-types is a peer dependency. require("react/package.json"); // react is a peer dependency. require("react-dom/package.json"); // react-dom is a peer dependency. var reactBorderWrapper = require("react-border-wrapper")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-border-wrapper v1.0.3

A wrapper for placing elements along div borders in React.

React Border Wrapper Logo

NPM NPM Github Issues

Test in Browser

Example

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

PropTypeDescription
innerPaddingstring numberPadding around the children on each edge.
borderWidthstring numberWidth of the border.
borderRadiusstring numberRadius 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.
borderColourstringCSS compatible string for the border colour
borderTypestringCSS compatible LineStyle string to change the border drawing style
topElement rightElement bottomElement leftElementElementJSX 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 rightPositionnumberA 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 rightOffsetstring numberOffset the component on the given side by this value. Use this to help center or positiomn each component to your desired location.
topGap rightGap bottomGap leftGapstring numberDistance 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

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free