All Projects → maxhallinan → reshep

maxhallinan / reshep

Licence: MIT license
A higher-order component that "reshapes" a React component props object.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to reshep

Hocs
🍱 Higher-Order Components for React
Stars: ✭ 1,784 (+13623.08%)
Mutual labels:  higher-order-component
rrx
⚛️ Minimal React router using higher order components
Stars: ✭ 69 (+430.77%)
Mutual labels:  higher-order-component
react-sync
A declarative approach to fetching data via a React higher order component
Stars: ✭ 18 (+38.46%)
Mutual labels:  higher-order-component
Neoform
✅ React form state management and validation
Stars: ✭ 162 (+1146.15%)
Mutual labels:  higher-order-component
react-listener-provider
Create a ReactListenerProvider and use HOC (Higher Order Components) to listen for Events in one place.
Stars: ✭ 19 (+46.15%)
Mutual labels:  higher-order-component
react-zap
⚡ Zap props from one React component to another, using React new context API and your existing higher-order components ⚡
Stars: ✭ 17 (+30.77%)
Mutual labels:  higher-order-component
React Goodbye
A save reminder component for react router v4+.
Stars: ✭ 120 (+823.08%)
Mutual labels:  higher-order-component
nextjs-redux-instagram
🌏 The simple Instagram was written by next.js & redux-saga & recompose
Stars: ✭ 48 (+269.23%)
Mutual labels:  higher-order-component
redux-autoloader
A higher order component for declarative data loading in React and Redux.
Stars: ✭ 56 (+330.77%)
Mutual labels:  higher-order-component
reassemble
Fast Library for the Composition of React Higher-Order-Components
Stars: ✭ 67 (+415.38%)
Mutual labels:  higher-order-component
React Nprogress
⌛️ A React primitive for building slim progress bars.
Stars: ✭ 173 (+1230.77%)
Mutual labels:  higher-order-component
react-app-loader
Production ready library for handling Microfrontends
Stars: ✭ 75 (+476.92%)
Mutual labels:  higher-order-component
react-portalgun
Lightweight portal system for React. Mega seeds included 🔫
Stars: ✭ 75 (+476.92%)
Mutual labels:  higher-order-component
Use Url State
Lift a React component's state into the url
Stars: ✭ 154 (+1084.62%)
Mutual labels:  higher-order-component
react-data-loader
Dead simple data loader helper for React
Stars: ✭ 22 (+69.23%)
Mutual labels:  higher-order-component
Next Nprogress
Next.js HOC to integrate NProgress inside your app
Stars: ✭ 145 (+1015.38%)
Mutual labels:  higher-order-component
react-table-hoc-draggable-columns
ReactTable HOC for draggable columns
Stars: ✭ 27 (+107.69%)
Mutual labels:  higher-order-component
react-example-paginated-list-infinite-scroll
Follow a React tutorial series with three parts to build a powerful component in React.
Stars: ✭ 43 (+230.77%)
Mutual labels:  higher-order-component
react-drip-form
☕ HoC based React forms state manager, Support for validation and normalization.
Stars: ✭ 66 (+407.69%)
Mutual labels:  higher-order-component
react-animation-frame
A React higher-order component that invokes a callback in a wrapped component via requestAnimationFrame
Stars: ✭ 47 (+261.54%)
Mutual labels:  higher-order-component

reshep

Build Status Coverage Status

A higher-order component that "reshapes" a React component props object according to a map of from/to path strings.

An alternative to a map function when no value transformation is required.

Install

$ npm install --save reshep

Usage

import assert from 'assert';
import { shapeFrom, } from 'reshep';

const enhance = shapeFrom({
  'history.push': 'changeRoute',
  'match.params.foo': 'foo',
});

const Foo = enhance(({ changeRoute, foo, }) => {
  assert.ok(changeRoute);
  assert.ok(foo);

  /* ... */
});
import assert from 'assert';
import { shapeWith, } from 'reshep';

const enhance = shapeWith({
  'match.params.foo': 'foo',
});

const Foo = enhance(({ match, foo, }) => {
  assert.ok(foo);

  // parent props are merged with new props
  assert.ok(match.params.foo);

  /* ... */
});

API

shapeFrom(pathMap)

Takes a map of path strings and returns a higher-order component. The higher-order component picks values from the parent props and sets them on a new props object passed to the base component.

pathMap

Type: { [string]: string }

An object map of path strings. The key is a path to pick from the parent props and the value is a path to set on the base component props.

shapeWith(pathMap)

Like shapeFrom, except the new props are deeply merged with the parent props.

pathMap

The same as the pathMap argument to shapeFrom.

License

MIT © Max Hallinan

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].