React-connect-line NPM

react-connect-line

You can match your react components by connecting the dots with lines.

Screenshot

Installation

npm install react-connect-line

Usage

import { useState, useEffect } from "react";
import { ConnectLine, ItemsProps } from 'react-connect-line';

function App() {
  const [items, setItems] = useState<ItemsProps[]>([]);
  const [isCorrectMatch, setIsCorrectMatch] = useState(false);

  useEffect(() => {
    const items = [
      {
        source: { text: "one" },
        target: { text: "1" },
      },
      {
        source: { text: "two" },
        target: { text: "2" },
      },
      {
        source: { text: "three" },
        target: { text: "3" },
      },
    ];

    setItems(items);
  }, []);

  console.log(isCorrectMatch);

  return (
    <ConnectLine
      items={items}
      setIsCorrectMatch={setIsCorrectMatch}
      containerSize={800}
      lineColor="orange"
      lineWidth={10}
      dotColor="orange"
      dotSize={46}
      fontSize={24}
    />
  );
}

export default App;

Props

Prop	Description	Type	Default
items	Contents to connect with a line	ItemsProps[]	required
isLayoutUpAndDown	Whether the source and target are placed top and bottom	boolean	false
setIsCorrectMatch	A function to store information about whether the source and target are correctly paired	React.Dispatch<React.SetStateAction>	undefined
containerSize	Size of the ConnectLine component (height if the layout is top or bottom, width if the layout is on both sides)	number	100%
lineColor	Color of the line connecting the dots	string	black
lineWidth	Width of the line connecting the dots	number	10
dotColor	Color of the dot	string	black
dotSize	Size of the dot (width and height are the same)	number	46
textColor	Color of the item's text	string	black
fontSize	Size of the item's text	number	50
imageSize	Size of the item's image	number	300