Skip to content

React Component ideal for controlling data from parent to children

Notifications You must be signed in to change notification settings

Rodrigo-JM/react-data-bouncer

Repository files navigation

react-data-bouncer

Component for controlling the flow of props from parent to child components

NPM JavaScript Style Guide

Install

npm install --save react-data-bouncer

Usage

Bouncer's purpose is to make sure you have your desired state/props on your parent component before rendering any children.

Best uses cases are:

  • When you want to use a prop that belongs to the parent in the children's ComponentDidMount.

  • When you want to call a function before the rendering of the children.

  • Very good use case when using React-Redux and wanting the children to have access to an updated store before rendering.

Steps:

  • Wrap the components you want to control the rendering

  • Pass functions as props

  • Pass arguments as an array (the name of the prop should be "function name" + "Args")

import React, { Component } from 'react'
import ChildComp from './ChildComp'
import Bouncer from 'react-data-bouncer'

let theUser = {
  id: 1,
  name: 'Jeff',
  age: 17,
  purchases: []
}

let purchases = ['1', '2']

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      user: {}
    }

    this.setUser = this.setUser.bind(this)
  }

  setUser(dummyuser, purchases){
    dummyuser.purchases = purchases

    this.setState({
      user: dummyuser
    })
  }

  render() {
    return (
      <div>
      //Pass functions you want to be called before Bouncer's children get rendered/mounted
      //If you want your function to be called with arguments, pass an array with the arguments as "function name" + "Args" 
        <Bouncer setUser={this.setUser} setUserArgs={[theUser, purchases]}>
          <ChildComp user={this.state.user}/>
        </Bouncer>
      </div>
    )
  }
}

License

MIT © Rodrigo-JM

About

React Component ideal for controlling data from parent to children

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published