react-ancestor

Share props using one component

Usage no npm install needed!

<script type="module">
  import reactAncestor from 'https://cdn.skypack.dev/react-ancestor';
</script>

README

👵 Ancestor

📌 Notice

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

What is it 🤔

Derivative of the compound component. This component allows you to pass props to all descendants from a single point - the ancestor component.

How to use 😫

  1. Install by running yarn add react-ancestor
  2. Add import Ancestor from "react-ancestor" to your file
  3. Wrap top level component in <Ancestor></Ancestor>
  4. Props passed to wrapper will be available to all components in component tree

📌 Example

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>
    )
}

Why? 🤔

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

Contributing ⛏️

Want to contribute?

  1. Fork the repo
  2. Clone the project on your own machine
  3. Run yarn to install dependencies
  4. Commit changes to your own branch
  5. Push your work back up to your fork
  6. Submit a PR so that I can review your changes