react-svg-connector

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'

Please run a full example to see all available props.

S shape

narrow-s shape

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();

  return (
    <Wrapper>
      <Connector
        el1={ref1.current}
        el2={ref2.current}
        shape="narrow-s"
        direction="r2l" // "l2l", "r2r", "l2l"
      />
        <Box1 ref={ref1} />
        <Box2 ref={ref2} />
    </Wrapper>
  );
}