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.
You can install react-connect-div via npm:
npm install react-connect-divTo 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>
);
}| 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. |
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>
);
}