🔬 useInside()
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:
yarn add use-inside
Use it in your React app:
// App.js import React from 'react'import Inside useInside from 'use-inside' { return <> <h1>useInside</h1> <Inside ="papaya" => <Greeting /> </Inside> </> } { const inside data = return <h2 =>inside && 'papaya'</h2>}
API
<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
: Aboolean
that will betrue
if the component is in the subtree of the providerInside
component.data
: The data passed through theInside
component.