https://github.com/hexium310/custom-dashed-border

React component for customisable dashed border
https://github.com/hexium310/custom-dashed-border

Last synced: about 2 months ago
JSON representation

React component for customisable dashed border

• Host: GitHub
• URL: https://github.com/hexium310/custom-dashed-border
• Owner: hexium310
• License: mit
• Created: 2019-07-09T12:32:55.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-08-27T14:59:58.000Z (over 5 years ago)
• Last Synced: 2024-11-13T09:59:10.882Z (about 2 months ago)
• Language: TypeScript
• Homepage:
• Size: 101 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# CustomDashedBorder

React component for customisable dashed border

![image](https://user-images.githubusercontent.com/10758173/60896675-b4e74300-a2a1-11e9-8574-a4b8a54f0ba8.png)

## Installation

```sh

yarn add -D custom-dashed-border

```

## Usage

```javascript.jsx

import React from 'react';

import { CustomDashedBorder } from 'custom-dashed-border';

const wrapperStyle = {

  position: 'relative',

  height: 110,

  width: 200,

  display: 'flex',

  justifyContent: 'center',

  alignItems: 'center',

};

const App = () => {

  return (

    // Require to wrap this component in `position: relative` block.

    


      

        Content

      

    

  );

};

```


### Props

This component has `top`, `right`, `bottom` and `left` props.

Can set border options (see below) to each prop.  

Positions that didn't use props are not displayed.  

Positions that didn't set options are using the default option.

```javascript

// Border position. top or bottom or right or left.

top: {

  // Can set CSS color value.

  color: '#000',

  // Length of each line (px).

  stripe: 10,

  // Length of between lines (px).

  spacing: 10,

  // Only top and bottom. Can use number or string.

  height: '1px',

  // Only right and left. Can use number or string.

  width: '1px',

}

```

## License

MIT