React Connect Div

react-connect-div is a lightweight npm package designed for connecting two HTML div elements together with a line, facilitating visual connections within your React applications.

Installation:

You can install react-connect-div via npm:

npm install react-connect-div

Usage:

To utilize react-connect-div, import it into your React component and use it as follows:

import DivConnector from "react-connect-div";

function App() {
    return (
        <main>
            <div className="A">A</div>
            <div className="B">B</div>
            <DivConnector from=".A" to=".B" />
        </main>
    );
}

Props:

| Prop | Type | Required | Default | Description | | ------------ | --------- | -------- | ------- | ---------------------------------------- | | from | string | Yes | - | CSS selector of the first element | | to | string | Yes | - | CSS selector of the second element | | container | string | No | - | CSS selector of container | | borderColor | string | No | 'grey' | The color of the connecting line. | | borderWidth | number | No | 10 | The thickness of the connecting line. | | borderRadius | number | No | 3 | The border radius of connecting line. | | zIndex | number | No | 1 | zIndex on connecting line. | | children | ReactNode | No | - | To render components on top of the line | | refreshWhen | number | No | - | CSS class name of the desired container. |

Examples:

Connect multiple elements

import DivConnector from "react-connect-div";

function App() {
    return (
        <main>
            <div className="A">A</div>
            <div className="B">B</div>
            <div className="C">C</div>
            <DivConnector from=".A" to=".B" />
            <DivConnector from=".C" to=".B" />
        </main>
    );
}

Render element on the line

import DivConnector from "react-connect-div";

function App() {
    return (
        <main>
            <div className="A">A</div>
            <div className="B">B</div>
            <DivConnector from=".A" to=".B">A to B<DivConnector/>
        </main>
    );
}

Default corner radius

import DivConnector from "react-connect-div";

function App() {
    return (
        <main>
            <div className="A">A</div>
            <div className="B">B</div>
            <DivConnector from=".A" to=".B" />
        </main>
    );
}

Specific corner radius

import DivConnector from "react-connect-div";

function App() {
    return (
        <main>
            <div className="A">A</div>
            <div className="B">B</div>
            <DivConnector borderRadius={40} from=".A" to=".B" />
        </main>
    );
}

Fully curved

import DivConnector from "react-connect-div";

function App() {
    return (
        <main>
            <div className="A">A</div>
            <div className="B">B</div>
            <DivConnector borderRadius={10000} from=".A" to=".B" />
        </main>
    );
}