https://github.com/karlhorky/react-sc-braces

Braces to indicate elements in diagrams
https://github.com/karlhorky/react-sc-braces

Last synced: 3 months ago
JSON representation

Braces to indicate elements in diagrams

• Host: GitHub
• URL: https://github.com/karlhorky/react-sc-braces
• Owner: karlhorky
• License: mit
• Created: 2019-05-17T12:04:06.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-12-15T11:52:16.000Z (about 1 year ago)
• Last Synced: 2024-10-26T01:18:58.179Z (4 months ago)
• Language: JavaScript
• Homepage: https://codesandbox.io/s/reactscbraces-gpjv3
• Size: 126 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-sc-braces

> Curly braces to indicate elements in diagrams (built in React and styled-components)



For vanilla HTML + CSS, check out the [Codepen](https://codepen.io/karlhorky/pen/vwmqqv).

## Install

This component is intended for use with React and styled-components. If you're using those libraries already, just copy and paste the component file [`Brace.js`](./Brace.js) into your codebase. This hasn't been published as a package yet, because publishing CSS packages is not great with the current state of tooling in 2019.

## [Demo](https://codesandbox.io/s/reactscbraces-gpjv3)

## Examples

```jsx

{/* Set brace and text colors to #fff, with annotation text */}

  JavaScript

{/* Set brace color to crimson (text color defaults to #000) */}

{/* Default to #000 brace and text colors */}

{/* Default to top side and auto width */}

```

## Props

| prop         | values                                          | default |

| ------------ | ----------------------------------------------- | ------- |

| `side`       | `top`, `bottom`, `left`, or `right`             | `top`   |

| `color`      | CSS color for both the curly brace and the text | `#000`  |

| `braceColor` | CSS color for the curly brace                   | `#000`  |

| `textColor`  | CSS color for the text                          | `#000`  |

| `width`      | width of the `top` and `bottom` side braces     | unset   |

| `height`     | height of the `left` and `right` side braces    | unset   |

| `fontSize`   | font size                                       | unset   |

| `fontFamily` | font family                                     | unset   |

## Credit

Heavily inspired by [Lauren Herda](https://github.com/lrenhrda)'s [Codepen](https://codepen.io/lrenhrda/pen/hkLIe).