react-lift-props

Let's you create a system of deeply nested components

Usage no npm install needed!

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

README

react-lift-props ยท Version CircleCI Codecov

This library solves a problem that occurs when you try to do composition with systems of components. For example, while before you might have this:

<Stepper>
  <Step name="my step name" />
</Stepper>

Now you can do this:

const MyCoolStep = () => {
  return <Step name="my step name" />
}

...

<Stepper>
  <MyCoolStep />
</Stepper>

This let's you encapsulate properties of the sub components so that the parent component doesn't need to know about it's details. It also let's you re-use components, group components, and all the other benefits of composition. For a more in-depth explanation of why this library exists, check out the medium post.

Docs

  • Check out the usage docs here

Limitations

  • Does not work in React Native
  • Does not work with non-index keys
    • Use indexes as keys on lifters and use non-index keys when looping over liftedProps

Roadmap

Contributing

  • fork / clone
  • run npm install && npm run setup
  • open a PR