mount-at-selector

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

mount-at-selector

★ 15 Open GitHub ↗

Render React components like a Modal outside the main React app

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# MountAtSelector

This React component allows rendering components like a Modal outside the main React app.

Inspired by a blog of Ryan Zec: https://blog.komand.com/how-to-render-components-outside-the-main-react-app

# Install

```
npm install --save mount-at-selector
```

# Use

Create an extra container like `#myModal` in your HTML:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="myModal"></div>
    <div id="app"></div>
  </body>
</html>
```

Create a `MountAtSelector` component in your React app:

```jsx
import React from 'react'
import ReactDOM from 'react-dom'
import MountAtSelector from 'mount-at-selector'

ReactDOM.render(
  <div>
    <p>
      Content rendered inside the React app...
    </p>

<MountAtSelector selector="#myModal">
      <div>
        I'm rendered inside the #myModal element,
        outside of the React app.
      </div>
    </MountAtSelector>
  </div>,
  document.getElementById('app')
)
```

# Demo

See the folder `/src` for a full demo. To run the demo, clone the git project
and run `npm install; npm start` in the root of the project.

# API

```
<MountAtSelector selector={string | Element}>
  ...
</MountAtSelector>
```

Properties:

- `selector`<br>
    A query selector like `'#myModal'` or a DOM element like
    `document.getElementById('myModal)`. You can attach
    multiple `MountAtSelector` components at the same selector.

# License

MIT

mount-at-selector

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README