0.4.4 • Published 10 months ago
react-mirror v0.4.4
React Mirror
Create synchronized replicas of a React DOM element
Usage
See equivalent uses of the hook and component below.
useMirror
hook
import { useMirror } from 'react-mirror';
function App() {
const [ref, mirror] = useMirror({ className: 'mirror-frame' });
return (
<>
<div ref={ref} />
{mirror}
</>
);
}
<Mirror />
component
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' />
</>
);
}
<Window />
component
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>
</>
);
}
Demos
Using Portals
0.4.4
10 months ago
0.4.1
2 years ago
0.4.3
1 year ago
0.4.2
1 year ago
0.3.5
2 years ago
0.1.7
2 years ago
0.4.0
2 years ago
0.1.6
4 years ago
0.1.4
4 years ago
0.1.5
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.0.3
4 years ago
0.0.2
4 years ago
2.0.0-rc.9
5 years ago
2.0.0-rc.8
5 years ago
2.0.0-rc.7
5 years ago
2.0.0-rc.6
5 years ago
2.0.0-rc.5
5 years ago
2.0.0-rc.4
5 years ago
2.0.0-rc.3
5 years ago
2.0.0-rc.2
5 years ago
2.0.0-rc.10
5 years ago
2.0.0-rc.1
5 years ago
2.0.0-alpha.5
5 years ago
2.0.0-alpha.4
5 years ago
2.0.0-alpha.3
5 years ago
2.0.0-alpha.2
5 years ago
2.0.0-alpha.1
5 years ago
1.1.4
5 years ago
1.1.3
5 years ago
1.1.2
5 years ago
1.1.1
5 years ago
1.1.0
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.2
5 years ago
0.2.1
5 years ago
0.2.0
5 years ago
0.1.0
5 years ago
0.0.0
5 years ago