Please keep in mind that this is a work in progress. I wouldn't use this for production but feel free to give it a shot. If you're looking for viable alternatives, you might want to check out the useContext hook or Redux
Derivative of the compound component. This component allows you to pass props to all descendants from a single point - the ancestor component.
- Install by running
yarn add react-ancestor
- Add
import Ancestor from "react-ancestor"
to your file - Wrap top level component in
<Ancestor></Ancestor>
- Props passed to wrapper will be available to all components in component tree
import React from 'react'
import Ancestor from 'react-ancestor'
import Child from './Child'
import './styles.css'
export default function App() {
return (
<Ancestor passed='Hi'>
<Child />
<Child passed='Hello' />
</Ancestor>
)
}
I don't even know if this is a good idea but it seemed like something fun to do - so why not? Seriously, why not?
Let me know why you think this is a bad idea via twitter @reactdon
Want to contribute?
- Fork the repo
- Clone the project on your own machine
- Run
yarn
to install dependencies - Commit changes to your own branch
- Push your work back up to your fork
- Submit a PR so that I can review your changes