react-svg-connector
React component to draw svg connectors to connect any React components
Installation
npm install react-svg-connector
or
yarn add react-svg-connector
Usage
Component props:
- el1: first React component
- el2: second React component
- shape (
optional
): 's' | 'narrow-s' | 'line'
- direction (
optional
): 'r2l' | 'l2l' | 'r2r' | 'l2r' |'b2t' | 'b2b' | 't2b' | 't2t'
- roundCorner (
optional
): true | false
- grid (
optional
): number of grid, used to calculate step = distanceX(Y) / grid
- minStep (
optional
): min value for the step
- stem: min distance from the start point
Please run a full example to see all available props.
S shape
narrow-s shape
const Wrapper = styled.div`
position: relative;
height: 100vh;
overflow: auto;
`;
const Box = styled.div`
width: 150px;
height: 50px;
cursor: pointer;
`;
const Box1 = styled(Box)`
background-color: green;
`;
const Box2 = styled(Box)`
background-color: red;
`;
function App() {
const ref1 = useRef();
const ref2 = useRef();
const [draw, redraw] = useState(0);
useEffect(() => {
redraw(Math.random());
}, [ref1, ref2])
return (
<Wrapper>
<Connector
el1={ref1.current}
el2={ref2.current}
shape="narrow-s"
direction="r2l" // "l2l", "r2r", "l2l"
roundCorner={true}
/>
<Box1 ref={ref1} />
<Box2 ref={ref2} />
</Wrapper>
);
}