react-hocs

1.0.0 • Public • Published

react-hocs

CircleCI

Higher Order Component Utilities for React Components

Installation

yarn add react-hocs

Usage

Full Example:

 
// ----- READ USER COMPONENT ----- //
class ReadUser extends Component {
  static defaultProps = {
    href: string,
    user: null,
    isReady: false,
  }
 
  // Do some cool loading stuff here using this.props.href
 
  render() {
    const { children, isReady, user, ...rest } = this.props;
 
    return React.cloneElement(children, { user, userReady: isReady, ...rest });
  }
}
 
const mapStateToProps = (state, props) => {
  const { href } = props;
  return {
    isReady: state.networks.state === RESOLVED,
    user: state.networks.everyone.find(e => {
      return e.data.href === href;
    }),
  };
};
 
const connectReadUser = connectFactory(
  connect(mapStateToProps)(ReadUser)
);
 
export { ReadUser };
export default connectReadUser;
 
// ----- I NEED A USER COMPONENT ----- //
 
class INeedAUser extends Component {
  render() {
    if (!this.props.userReady) { return null; }
 
    return (
      <div>
        {this.props.user.data.first_name}
      </div>
    );
  }
}
 
const mapStateToProps = (state) => {
  return {
    // Map other data here
  };
};
 
export default bind(
  // By default, the hocFactory will auto-map props for you, making this redundant
  // instead, we could use `connectReadUser()` and it would be the same functionality
  connectReadUser(({ href }) => { return { href }; }),
  connect(mapStateToProps)
)(INeedAUser);
 
// ----- APP COMPONENT ----- //
 
class App extends Component {
  render () {
    return (
      <INeedAUser href="/users/123" />
    );
  }
}
 

Readme

Keywords

none

Package Sidebar

Install

npm i react-hocs

Weekly Downloads

1

Version

1.0.0

License

MIT

Last publish

Collaborators

  • imontiel