# @react-md/portal

> This package is for including icons within react-md. There is included support for both font icons and SVG icons. There is also a helper component for applying spacing between icons and text.

Latest version **5.1.0** (published 2022-03-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install @react-md/portal
pnpm add @react-md/portal
yarn add @react-md/portal
bun add @react-md/portal
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.1.0 |
| Published | 2022-03-18 |
| First published | 2019-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 37 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Mikkel Laursen |
| Maintainers | mlaursen |
| Keywords | react-md, material design, react, icon, font icon, svg icon, component, components |

## Links

- npm: https://www.npmjs.com/package/@react-md/portal
- Repository: https://github.com/mlaursen/react-md
- Homepage: https://react-md.dev/packages/portal/demos
- Issues: https://github.com/mlaursen/react-md/issues
- npm.io page: https://npm.io/package/@react-md/portal

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 5.1.0 (latest) — 2022-03-18
- 2.0.0-beta.2 (next) — 2020-06-06
- 5.0.0 — 2022-01-31
- 4.0.3 — 2022-01-01
- 4.0.1 — 2021-11-27
- 4.0.0 — 2021-11-24
- 3.1.0 — 2021-09-10
- 3.0.0 — 2021-08-13
- 2.9.1 — 2021-07-27
- 2.8.3 — 2021-05-18
- 2.8.0 — 2021-04-22
- 2.7.0 — 2021-02-28
- 2.5.0 — 2020-12-16
- 2.4.2 — 2020-10-23
- 2.4.1 — 2020-10-17
- … 20 more at https://npm.io/package/@react-md/portal/versions

## README

# @react-md/portal

The Portal component is a simple wrapper with React's `createPortal` API that
will automatically generate portal nodes behind the scenes as needed. Unlike the
majority of `react-md` packages, this package does not export any styles.

## Installation

```sh
npm install --save @react-md/portal
```

<!-- DOCS_REMOVE -->

## Documentation

You should check out the
[full documentation](https://react-md.dev/packages/portal/demos) for live
examples and more customization information, but an example usage is shown
below.

<!-- DOCS_REMOVE_END -->

## Usage

The main purpose of the `Portal` is to be able to fix overflow issues for fixed
elements within the page. If you have `overflow` set to anything other than the
default value, fixed elements might not appear correctly. To work around this,
you can portal that fixed element to a different part of the page and it'll fix
the problem. If none of this makes sense to you at a first glance, you probably
don't need this package.

The example below will just show the API for the portal and not a real world
example.

```tsx
import { useState } from "react";
import { render } from "react-dom";
import { Portal } from "@react-md/portal";

const App = () => {
  const [visible, setVisible] = useState(false);

  return (
    <>
      <button
        id="example-button"
        type="button"
        onClick={() => setVisible((prevVisible) => !prevVisible)}
      >
        Show Portal
      </button>
      <Portal>
        {visible && (
          <h3>
            This is some portalled text that will only appear when{" "}
            <code>visible</code>
          </h3>
        )}
      </Portal>
    </>
  );
};

render(<App />, document.getElementById("root"));
```

---
_Source: https://npm.io/package/@react-md/portal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._