# @rmwc/base

> RMWC base module

Latest version **14.3.5** (published 2024-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rmwc/base
pnpm add @rmwc/base
yarn add @rmwc/base
bun add @rmwc/base
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 14.3.5 |
| Published | 2024-10-24 |
| First published | 2018-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 42.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1657 |
| Author | rmwc |
| Maintainers | jamesmfriedman |
| Keywords | rmwc |

## Links

- npm: https://www.npmjs.com/package/@rmwc/base
- Repository: https://github.com/rmwc/rmwc
- Homepage: https://github.com/rmwc/rmwc/tree/master/packages/base#readme
- Issues: https://github.com/rmwc/rmwc/issues
- npm.io page: https://npm.io/package/@rmwc/base

## Dependencies (6)

- [tslib](https://npm.io/package/tslib.md) ^2.4.0
- [hyperform](https://npm.io/package/hyperform.md) ^0.11.0
- [classnames](https://npm.io/package/classnames.md) ^2.3.1
- [@rmwc/types](https://npm.io/package/@rmwc/types.md) 14.3.5
- [@material/dom](https://npm.io/package/@material/dom.md) ^14.0.0
- [mutation-observer](https://npm.io/package/mutation-observer.md) ^1.0.3

## Recent versions

- 14.3.5 (latest) — 2024-10-24
- 14.0.2-alpha.7 (next) — 2023-10-30
- 14.3.4 — 2024-09-25
- 14.3.3 — 2024-08-30
- 14.3.2 — 2024-08-19
- 14.3.1 — 2024-07-19
- 14.3.0 — 2024-07-18
- 14.2.9 — 2024-07-03
- 14.2.8 — 2024-07-01
- 14.2.7 — 2024-06-30
- 14.2.6 — 2024-06-28
- 14.2.5 — 2024-06-26
- 14.2.2 — 2024-04-24
- 14.2.1 — 2024-04-17
- 14.2.0 — 2024-04-17
- … 155 more at https://npm.io/package/@rmwc/base/versions

## README

# Portal

The Portal component will let you render components to a portal.

- Module **@rmwc/base**


## Portal

```jsx
<Portal />
```

## PortalProvider (optional)

The PortalProvider component is an optional component that provides a global context for the Portal element in the RMWC library. This context is used by the Portal component to retrieve the Portal element without relying on document.getElementById, which doesn't work inside a Shadow DOM.

The PortalProvider component is used by importing it into your project and wrapping it around your application or component tree similar to TypographyProvider.

```jsx
function App() {
  return (
    <PortalProvider>
      <div>
        {/* Other components here */}
        <Portal />
      </div>
    </PortalProvider>
  );
}
```

In this example, the PortalProvider component is used to wrap the Portal component. Elements rendered to the portal will now render directly to the portalElement stored in the portal context instead of retrieving the Portal element using `document.getElementById()`.

The PortalProvider component is optional for most users. If you are using the RMWC library in a Shadow DOM and the Portal component is not rendering inside the correct Portal element, then you can use the PortalProvider component to ensure that the Portal element is retrieved using the PortalContext.

## Notes

The PortalProvider component does not accept any props.

The Portal component only needs to be a descendent of PortalProvider for it to be functional.

Unlike ThemeProvider or TypographyProvider, the PortalProvider component should only be used once in your application or component tree. (If you include multiple instances of PortalProvider, the context will only grab the context values from the first PortalProvider parent and the solution will break.)

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