react-pretty-wires

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