# use-inside

> [](https://www.npmjs.com/package/use-inside) [](https://bundlephobia.com/result?p=use-inside)

Latest version **0.2.0** (published 2020-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-inside
pnpm add use-inside
yarn add use-inside
bun add use-inside
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-03-31 |
| First published | 2020-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Aragon Association |
| Maintainers | ajsantander, aragon-ci, bingen, bpierre, evalir, facuspagnuolo, gabrielg, izqui, luisivan, sohkai |

## Links

- npm: https://www.npmjs.com/package/use-inside
- npm.io page: https://npm.io/package/use-inside

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2

## Recent versions

- 0.2.0 (latest) — 2020-03-31
- 0.1.0 — 2020-02-27

## README

# 🔬 useInside()

[<img src="https://img.shields.io/npm/v/use-inside" alt="" />](https://www.npmjs.com/package/use-inside) [<img src="https://img.shields.io/bundlephobia/minzip/use-inside" alt="" />](https://bundlephobia.com/result?p=use-inside)

useInside() allows a component to be aware if its "inside" the subtree of another component and receive data from it, in the most straightforward, simple way possible.

## Usage

Add it to your project:

```console
yarn add use-inside
```

Use it in your React app:

```jsx
// App.js

import React from 'react'
import { Inside, useInside } from 'use-inside'

function App() {

  return (
    <>
      <h1>useInside</h1>
      <Inside name="papaya" data={{backgroundColor: 'papayawhip'}}>
        <Greeting />
      </Inside>
    </>
  )
}

function Greeting() {
  const [inside, data] = useInside('papaya')

  return <h2 style={{...data}}>{inside && 'papaya'}</h2>
}

export default App
```

## API

### &lt;Inside />

This is the provider component. It should be placed above any component using `useInside()`. Apart from `children`, it accepts two other props:

#### name (required)

The name of the inside context. Required for storing the context into a map for later retrieval.

#### data

The data passed to the component using `useInside()`. Accepts any type.

### useInside()

This is the hook to be used throughout the app.

It takes a string as a single required param, and returns an array containing the following:

- `inside`: A `boolean` that will be `true` if the component is in the subtree of the provider
  `Inside` component.
- `data`: The data passed through the `Inside` component.

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