https://github.com/cawfree/react-pretty-wires

Prettified wires for React. 🔥
https://github.com/cawfree/react-pretty-wires

react react-native react-native-web svg wire wires

Last synced: 8 days ago
JSON representation

Prettified wires for React. 🔥

• Host: GitHub
• URL: https://github.com/cawfree/react-pretty-wires
• Owner: cawfree
• Created: 2019-12-04T20:29:40.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T02:24:53.000Z (almost 2 years ago)
• Last Synced: 2024-08-10T20:34:41.384Z (3 months ago)
• Topics: react, react-native, react-native-web, svg, wire, wires
• Language: JavaScript
• Homepage:
• Size: 424 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 8
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-pretty-wires

[NoFlo's](https://github.com/noflo/noflo) Prettified wires for React. Display visual relationships with some flare 🔥🔥🔥.

## 🚀 Getting Started

Using [`npm`]():

```bash

npm install --save react-pretty-wires

```

Using [`yarn`]():

```bash

yarn add react-pretty-wires

```

## ✍️ Example

```javascript

import React from 'react';

import PrettyWire from 'react-pretty-wires';

export default () => (

  

);

```

### ⚛️ React Native

`react-pretty-wires` can also be used with [React Native](https://facebook.github.io/react-native/)! You just need to change your `import` source:

```git

- import PrettyWire from 'react-pretty-wires';

+ import PrettyWire from 'react-pretty-wires/dist/PrettyWire.native';

```

## 📌 Prop Types

Prop                  | Type     | Default                   | Required | Description

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

avoidanceRadius|number|100|No|The amount of curvature to apply to tightly wrapped wires.

epsilon|number|0.01|No|The threshold to treat a curve as a straight line.

arrow|bool|false|No|Draw an arrow.

arrowLength|number|12|No|Size of the arrow to draw.

arrowProgression|number|0.5|No|Percentage (0 ... 1) of where along the curve to render the arrow.

color|string|'black'|No|Color of the wire.

## ✌️ License

[MIT](https://opensource.org/licenses/MIT)