react-pretty-wires

NoFlo's Prettified wires for React. Display visual relationships with some flare 🔥🔥🔥.

🚀 Getting Started

Using npm:

npm install --save react-pretty-wires

Using yarn:

yarn add react-pretty-wires

✍️ Example

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

export default () => (
  <PrettyWire
    sourceX={100}
    sourceY={100}
    targetX={500}
    targetY={500}
    arrow
  />
);

⚛️ React Native

react-pretty-wires can also be used with React Native! You just need to change your import source:

- 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