import { Bathtub, DriveEta, Work, Hotel, Computer, Kitchen } from '@material-ui/icons';
<ArrowsBetweenDivsContextProvider debug>
{({ registerDivToArrowsContext }) => (
<>
{}
<ArrowBetweenDivs
from={{ id: 'sleep', placement: ArrowAnchorPlacement.TOP }}
to={{ id: 'code', placement: ArrowAnchorPlacement.BOTTOM }}
orientation={LineOrientation.VERTICAL}
/>
<ArrowBetweenDivs
from={{ id: 'code', placement: ArrowAnchorPlacement.RIGHT }}
to={{ id: 'shower', placement: ArrowAnchorPlacement.LEFT }}
orientation={LineOrientation.HORIZONTAL}
/>
<ArrowBetweenDivs
from={{ id: 'shower', placement: ArrowAnchorPlacement.RIGHT }}
to={{ id: 'driveToWork', placement: ArrowAnchorPlacement.LEFT }}
orientation={LineOrientation.HORIZONTAL}
/>
<ArrowBetweenDivs
from={{ id: 'driveToWork', placement: ArrowAnchorPlacement.BOTTOM }}
to={{ id: 'work', placement: ArrowAnchorPlacement.TOP }}
orientation={LineOrientation.VERTICAL}
/>
<ArrowBetweenDivs
from={{ id: 'work', placement: ArrowAnchorPlacement.LEFT }}
to={{ id: 'driveFromWork', placement: ArrowAnchorPlacement.RIGHT }}
orientation={LineOrientation.HORIZONTAL}
/>
<ArrowBetweenDivs
from={{ id: 'driveFromWork', placement: ArrowAnchorPlacement.LEFT }}
to={{ id: 'eat', placement: ArrowAnchorPlacement.RIGHT }}
orientation={LineOrientation.HORIZONTAL}
/>
<ArrowBetweenDivs
from={{ id: 'eat', placement: ArrowAnchorPlacement.LEFT }}
to={{ id: 'sleep', placement: ArrowAnchorPlacement.RIGHT }}
orientation={LineOrientation.HORIZONTAL}
/>
{}
<div style={{ display: 'flex', justifyContent: 'space-between', width: 500, height: 300, flexDirection: 'column' }}>
<div style={{ display: 'flex', justifyContent: 'space-around', flex: 1 }}>
<div>
<div ref={(div) => registerDivToArrowsContext({ id: 'code', div })} style={{ padding: 15 }}>
<Computer />
</div>
</div>
<div>
<div ref={(div) => registerDivToArrowsContext({ id: 'shower', div })} style={{ padding: 15 }}>
<Bathtub />
</div>
</div>
<div>
<div ref={(div) => registerDivToArrowsContext({ id: 'driveToWork', div })} style={{ padding: 15 }}>
<DriveEta />
</div>
</div>
</div>
<div style={{ display: 'flex', justifyContent: 'space-around', flex: 1 }}>
<div>
<div ref={(div) => registerDivToArrowsContext({ id: 'sleep', div })} style={{ padding: 15 }}>
<Hotel />
</div>
</div>
<div style={{ marginTop: 21 }}>
<div ref={(div) => registerDivToArrowsContext({ id: 'eat', div })} style={{ padding: 15 }}>
<Kitchen />
</div>
</div>
<div style={{ marginTop: 21 }}>
<div ref={(div) => registerDivToArrowsContext({ id: 'driveFromWork', div })} style={{ padding: 15 }}>
<DriveEta />
</div>
</div>
<div>
<div ref={(div) => registerDivToArrowsContext({ id: 'work', div })} style={{ padding: 15 }}>
<Work />
</div>
</div>
</div>
</div>
</>
)}
</ArrowsBetweenDivsContextProvider>