react-connect-div v1.1.1

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:

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