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' |'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>
  );
}