https://github.com/iamogbz/react-mirror

🪞 Create synchronized replicas of a DOM element using React
https://github.com/iamogbz/react-mirror

mirror portal react react-dom react-mirror react-portal

Last synced: 29 days ago
JSON representation

🪞 Create synchronized replicas of a DOM element using React

• Host: GitHub
• URL: https://github.com/iamogbz/react-mirror
• Owner: iamogbz
• License: unlicense
• Created: 2020-03-20T03:10:45.000Z (about 5 years ago)
• Default Branch: main
• Last Pushed: 2024-04-30T10:37:07.000Z (12 months ago)
• Last Synced: 2024-05-02T01:37:19.600Z (12 months ago)
• Topics: mirror, portal, react, react-dom, react-mirror, react-portal
• Language: TypeScript
• Homepage: http://ogbizi.com/react-mirror/
• Size: 73.4 MB
• Stars: 11
• Watchers: 2
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# React Mirror



[![NPM badge](https://img.shields.io/npm/v/react-mirror)](https://www.npmjs.com/package/react-mirror)

[![Dependabot badge](https://badgen.net/github/dependabot/iamogbz/react-mirror/?icon=dependabot)](https://app.dependabot.com)

[![Dependencies](https://img.shields.io/librariesio/github/iamogbz/react-mirror)](https://libraries.io/github/iamogbz/react-mirror)

[![Build Status](https://github.com/iamogbz/react-mirror/workflows/Build/badge.svg)](https://github.com/iamogbz/react-mirror/actions)

[![Coverage Status](https://coveralls.io/repos/github/iamogbz/react-mirror/badge.svg?branch=refs/heads/main)](https://coveralls.io/github/iamogbz/react-mirror)

Create synchronized replicas of a React DOM element

> Suggested alternative for non react usage [mirror-element](https://github.com/iamogbz/oh-my-wcs/blob/main/components/el-mirror.md)

## Usage

See equivalent uses of the hook and component below.

### `useMirror` hook

```jsx

import { useMirror } from 'react-mirror';

function App() {

  const [ref, mirror] = useMirror({ className: 'mirror-frame' });

  return (

    <>

      


      {mirror}

    >

  );

}

```


### `` component

```jsx

import React from 'react';

import { Mirror } from 'react-mirror';

function App() {

  const [reflect, setReflect] = React.useState(null);

  return (

    <>

      


      

    >

  );

}

```


### `` component

You can also render a reflection, with all the styles needed, in a separate window using the magic of [`Portals`](https://reactjs.org/docs/portals.html) 🌀

```jsx

import React from 'react';

import { FrameStyles, Reflection, Window } from 'react-mirror';

function App() {

  const [reflect, setReflect] = React.useState(null);

  return (

    <>

      


      

        

        

      

    >

  );

}

```


## Demos

### Using Portals

- [Live Preview](https://ogbizi.com/react-mirror/) ([source](demo))

## Alternatives

- Simple HTML custom [mirror-element](https://github.com/iamogbz/oh-my-wcs/blob/main/components/el-mirror.md)

- [Curious case of independent genesis](https://github.com/Theadd/react-mirror#readme)