@karsegard/react-compose v1.3.2

React-compose

Introduction

This is a collection of Higher Order Function that helps to compose React components

Concept

modifiers

Modifiers are props that will be converted to a class

variables

Variables are props that will be converted to styles

API

• withModifiers(namerFunction, modifiersArray) Generate a new component that will accept Props presents in the modifiers Array. For each passed prop it will call the namer function

• withVariables = (keyEnhancerFunction, valEnhancerFunction, variablesArray)

• keyEnhancer = prop, value, all props => new key

• valueEnhancer = value => value

Re-usable & composable Properties

For example, you want to create components That support getting a grid area.

import {withVariables,withBaseClass} from  '@karsegard/react-compose'

export  const  withGridArea  =  withVariables(
			_  =>  `gridArea`,
			x  =>  `${x}`,
			['area']
);

export const ComponentWithArea = compose( withGridArea, withBaseClass('area-component') )(divElement);

// somewhere Else
...
let MyComponentWithArea = withArea(MyExistingComponent)
return (<MyComponentWithArea area="header"/>)

Install

yarn add @karsegard/react-compose

Usage

see example

License

MIT © FDT2k