https://github.com/metroxe/react-border-wrapper

A wrapper for placing elements along div borders.
https://github.com/metroxe/react-border-wrapper

border border-color border-style border-wrapper browser div html5 javascript javascript-library jsx npm props react react-component react-components react-hooks reactjs rollup tsx typescript

Last synced: 6 days ago
JSON representation

A wrapper for placing elements along div borders.

• Host: GitHub
• URL: https://github.com/metroxe/react-border-wrapper
• Owner: Metroxe
• License: mit
• Created: 2019-03-16T01:39:34.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-09T16:08:05.000Z (about 2 years ago)
• Last Synced: 2025-01-08T12:07:30.736Z (14 days ago)
• Topics: border, border-color, border-style, border-wrapper, browser, div, html5, javascript, javascript-library, jsx, npm, props, react, react-component, react-components, react-hooks, reactjs, rollup, tsx, typescript
• Language: JavaScript
• Homepage: https://metroxe.github.io/react-border-wrapper/
• Size: 2.04 MB
• Stars: 166
• Watchers: 7
• Forks: 6
• Open Issues: 37
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
[![React Border Wrapper Logo](https://metroxe.github.io/react-border-wrapper/react_border_wrapper_logo.png)](https://metroxe.github.io/react-border-wrapper/)

[![NPM](https://img.shields.io/npm/v/react-border-wrapper.svg)](https://www.npmjs.com/package/react-border-wrapper)

[![NPM](https://img.shields.io/npm/dt/react-border-wrapper.svg)](https://www.npmjs.com/package/react-border-wrapper)

[![Github Issues](https://img.shields.io/github/issues/metroxe/react-border-wrapper.svg)](https://github.com/Metroxe/react-border-wrapper/issues)

### [Test in Browser](https://metroxe.github.io/react-border-wrapper/)

![Example](https://metroxe.github.io/react-border-wrapper/react_border_wrapper_example.png)

## Installation

### npm

```bash

npm install react-border-wrapper

```

### yarn

```bash

yarn add react-border-wrapper

```

## Usage

Use the border wrapper in the same way you would use a `
`.


```tsx

import * as React from 'react'

import BorderWrapper from 'react-border-wrapper'

class Example extends React.Component {

  render () {

    return (

      

      	// Content

      

    )

  }

}

```

## 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](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.

[https://metroxe.github.io/react-border-wrapper/](https://metroxe.github.io/react-border-wrapper/)

## License

MIT © [Christopher Powroznik](https://github.com/Metroxe)