Create synchronized replicas of a React DOM element
Suggested alternative for non react usage mirror-element
See equivalent uses of the hook and component below.
import { useMirror } from 'react-mirror'; function App() { const [ref, mirror] = useMirror({ className: 'mirror-frame' }); return ( <> <div ref={ref} /> {mirror} </> ); }import React from 'react'; import { Mirror } from 'react-mirror'; function App() { const [reflect, setReflect] = React.useState(null); return ( <> <div ref={setReflect} /> <Mirror reflect={reflect} className='mirror-frame' /> </> ); }You can also render a reflection, with all the styles needed, in a separate window using the magic of Portals 🌀
import React from 'react'; import { FrameStyles, Reflection, Window } from 'react-mirror'; function App() { const [reflect, setReflect] = React.useState(null); return ( <> <div ref={setReflect} /> <Window> <FrameStyles /> <Reflection real={reflect} style={{ pointerEvents: "none" }} /> </Window> </> ); }- Simple HTML custom mirror-element
- Curious case of independent genesis