# react-dom-outside

> React components for react-dom and react-native-web click outside

Latest version **1.1.0** (published 2026-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-dom-outside
pnpm add react-dom-outside
yarn add react-dom-outside
bun add react-dom-outside
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2026-09-20 |
| First published | 2022-07-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=16 |
| Dependencies | 0 |
| Unpacked size | 79.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Kevin Malakoff |
| Maintainers | kmalakoff |
| Keywords | react, web, react-dom, dom, contains, outside, universal, typescript |

## Links

- npm: https://www.npmjs.com/package/react-dom-outside
- Repository: https://github.com/kmalakoff/react-dom-outside
- Homepage: https://github.com/kmalakoff/react-dom-outside#readme
- Issues: https://github.com/kmalakoff/react-dom-outside/issues
- npm.io page: https://npm.io/package/react-dom-outside

## Alternatives

- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads

## Recent versions

- 1.1.0 (latest) — 2026-09-20
- 1.0.16 — 2026-09-12
- 1.0.15 — 2026-05-26
- 1.0.14 — 2026-05-22
- 1.0.12 — 2025-12-12
- 1.0.11 — 2025-12-12
- 1.0.10 — 2025-12-04
- 1.0.9 — 2025-12-04
- 1.0.8 — 2025-12-02
- 1.0.7 — 2025-11-06
- 1.0.6 — 2025-10-21
- 1.0.5 — 2025-10-21
- 1.0.4 — 2025-07-08
- 1.0.3 — 2025-06-22
- 1.0.2 — 2025-06-21
- … 26 more at https://npm.io/package/react-dom-outside/versions

## README

## react-dom-outside

React components for detecting clicks outside a component in React DOM and react-native-web applications.

Install the package and its peer dependencies:

```bash
npm install react react-dom react-dom-outside react-dom-event react-ref-boundary
```

Requires React 16.8 or newer.

For a React Native version, see [react-native-outside](https://www.npmjs.com/package/react-native-outside).

### Active component

```tsx
import { forwardRef } from 'react';
import { EventProvider } from 'react-dom-event';
import { Active, type ActiveInjectedProps } from 'react-dom-outside';

const Component = forwardRef<HTMLDivElement, Partial<ActiveInjectedProps>>(({ isActive, setIsActive }, ref) => {
  return (
    <div ref={ref}>
      <div>{isActive ? 'active' : 'not active'}</div>
      <button type="button" onClick={() => setIsActive?.((current) => !current)}>
        Toggle
      </button>
    </div>
  );
});

export default function App() {
  return (
    <EventProvider>
      <Active>
        <Component />
      </Active>
    </EventProvider>
  );
}
```

`Active` and `ActiveBoundary` require exactly one child, which must forward its ref to the DOM element that defines its inside area. Fragments and multiple children are rejected. Both components preserve the child's existing object or callback ref, including React 19 cleanup callbacks. They inject `isActive` and the React state setter `setIsActive`. Clicking outside sets `isActive` to `false`.

### Active boundary component

Use `ActiveBoundary` when another DOM element should count as inside the active area. Register that element with `react-ref-boundary`:

```tsx
import { forwardRef } from 'react';
import { EventProvider } from 'react-dom-event';
import { ActiveBoundary, type ActiveInjectedProps } from 'react-dom-outside';
import { useRef as useBoundaryRef } from 'react-ref-boundary';

const Component = forwardRef<HTMLDivElement, Partial<ActiveInjectedProps>>(({ isActive, setIsActive }, ref) => (
  <div ref={ref}>
    <div>{isActive ? 'active' : 'not active'}</div>
    <button type="button" onClick={() => setIsActive?.((current) => !current)}>
      Toggle
    </button>
    <AdditionalBoundary />
  </div>
));

function AdditionalBoundary() {
  const ref = useBoundaryRef<HTMLDivElement>(null);
  return <div ref={ref}>Clicks here remain inside the active boundary.</div>;
}

export default function App() {
  return (
    <EventProvider>
      <ActiveBoundary>
        <Component />
      </ActiveBoundary>
    </EventProvider>
  );
}
```

### Documentation

[API Docs](https://kmalakoff.github.io/react-dom-outside/)

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