Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

🌟 DataFormsJS 🌟 A minimal JavaScript Framework and standalone React and Web Components for rapid development of high quality websites and single page applications.

Stars: ✭ 95 (-35.37%)

Mutual labels: react-components, jsx

React Splitters

React splitter component, written in TypeScript.

Stars: ✭ 127 (-13.61%)

Mutual labels: react-components, react-component

React Ckeditor

CKEditor component for React with plugin and custom event listeners support

Stars: ✭ 124 (-15.65%)

Mutual labels: npm, react-component

Skia Wasm Port

Port of the Skia drawing library to wasm, for use in javascript (node & browser)

Stars: ✭ 131 (-10.88%)

Mutual labels: browser, html5

View All Similar Projects ➔

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/

License

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 147

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (15) 🔗