import { NodeOrganogram } from 'node-organogram/node-organogram';

screenshot

the component will be rendered inside a contained of some hieght.

const [mapping, setMapping] = useState({
 a: {
   b: null,
   g: { z: null },
   h: null,
   i: null,
   j: { t: { qq: null } },
   k: { t: { qq: null } },
   l: {
     t: { qq: null },
     u: null,
     v: null,
     w: null,
     x: { qq: null },
     y: null,
   },
   m: null,
   n: null,
   o: null,
   p: { q: { qq: null }, r: null, s: { qq: null } },
 }});```

```js
const customStyles = useRef([{
boxStyle: {
 style: {
   height: 'fit-content',
   width: '50%',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'start',
   alignItems: 'center',
   borderRadius: '10px',
   borderLeft: '1px solid purple',
   borderRight: '1px solid purple',
   margin: '1em',
   padding: '0.5em',
 },
 boxes: ['a', 'b', 'c', 'd', 'e'],
},
lineStyle: {
 style: { color: 'purple' },
 parents: ['a', 'b', 'c', 'd', 'e'],
},
text: ` This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.`,
},
{
boxStyle: {
 style: {
   height: 'fit-content',
   width: '50%',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'start',
   alignItems: 'center',
   borderRadius: '10px',
   borderLeft: '1px solid purple',
   borderRight: '1px solid purple',
   margin: '1em',
   padding: '0.5em',
 },
 boxes: ['f', 'g'],
},
lineStyle: {
 style: { color: 'blue' },
 parents: ['f', 'g'],
},
text: ` This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.`,
},
{
boxStyle: {
 style: {
   height: 'fit-content',
   width: '50%',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'start',
   alignItems: 'center',
   borderRadius: '10px',
   borderLeft: '1px solid purple',
   borderRight: '1px solid purple',
   margin: '1em',
   padding: '0.5em',
 },
 boxes: ['h', 'i', 'j', 'k', 'l', 'x', 'y', 's', 'n'],
},
lineStyle: {
 style: { color: 'blue' },
 parents: ['h', 'i', 'j', 'k', 'l'],
},
text: ` This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.`,
},
{
boxStyle: {
 style: {
   height: 'fit-content',
   width: '50%',
   display: 'flex',
   flexDirection: 'column',
   justifyContent: 'start',
   alignItems: 'center',
   borderRadius: '10px',
   borderLeft: '1px solid purple',
   borderRight: '1px solid purple',
   margin: '1em',
   padding: '0.5em',
 },
 boxes: ['m', 'o', 'p', 'r', 'w', 'z', 't', 'q', 'v', 'u', 'qq'],
},
lineStyle: {
 style: { color: 'red' },
 parents: ['m', 'o', 'p', 'r', 'w'],
},
text: ` Recently I had a task where I had to print specific parts of a web page dynamically,
            from JavaScript. This certainly does not sound like the most complicated problem in the world. Still`,
},
]);

const defaultSetting = useRef({
  height: 'fit-content',
  width: '50%',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'start',
  alignItems: 'center',
  borderRadius: '10px',
  borderLeft: '1px solid purple',
  borderRight: '1px solid purple',
  margin: '1em',
  padding: '0.5em',
});

<div style={{ height: '80vh' }}>
  <MainFrame
    mapping={mapping}
    boxProperties={customStyles.current}
    defaultSetting={defaultSetting.current}
  />
</div>

properties

mapping: - mapping is an object representing the structure. boxProperties: - this property defines the styles of boxes. defaultSetting: - default styles of boxes if not provided through boxProperties.