[<img src="" alt="" />]( [<img src="" alt="" />](
Last updated 7 months ago by bpierre .
MIT · Original npm · Tarball · package.json
$ cnpm install use-inside 
SYNC missed versions from official npm registry.

???? 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.


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'

function App() {

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

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

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

export default App


<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.


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


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.

Current Tags

  • 0.2.0                                ...           latest (7 months ago)

2 Versions

  • 0.2.0                                ...           7 months ago
  • 0.1.0                                ...           8 months ago

Copyright 2014 - 2017 © |