A wrapper for creating react PureComponents
npm install @kigiri/pure@kigiri/pureIf you treat your state as immutable, then your components should make use of that.
@kigiri/pure allow you to create classes that extend PureComponent with less boiler plate.
``bash`React is a peer dependencie
npm i @kigiri/pure react
higher order component to create PureComponents from a just render function.`js
// Components.js
import { Pure, React } from '@kigiri/pure'export const NoOptions = Pure(props =>
{props.name}
)
`>
React is passed down for convenience$3
#### .
withEvent
The api also give a withEvent options with a mean to listen to some of the components methods events as functionals props:
- onMount -> componentDidMount
- onCatch -> componentDidCatch
- onUpdate -> componentDidUpdate
- onUnmount -> componentWillUnmount`js
export const WithEvents = Pure({ withEvent: true }, props =>
Look ma, no classes !
)
`#### .
classNames
The classNames options that allow you to merge some classes with the one
you may be given in props.`js
export const ClassNames = ({ classNames: [ 'b', 'c' ] }, props =>
Merged class names !
)
`#### .
classFlags
The classFlags option generates boolean flags as short hands for applying css classes.
`js
// options can be passed last or first.
export const FlagClass = (props =>
Flag classes
, {
classFlags: {
disabled: 'dis',
selected: 'bp-selected'
}
})
`#### .
name
The name option allow you to specify the expected name of your component.
By default it will try use (in that order):
- the name given as an option
- the name of the given function
- name of the file calling (unreliable, only tested on node)
- name of the exended class (PureComponent or PureEventComponent)Usefull for debuging.
$3
`js
// Demo
import React from 'react'
import ReactDOM from 'react-dom'
import { NoOptions, ClassNames, FlagClass, WithEvents } from './Components.js'const rootElement = document.getElementById('root')
ReactDOM.render(
{/ render to: Jean-Michel /}
{/ render to: Merged class names ! /}
{/ render to: Flag classes /}
console.log(event.target)} />
{/ log the event target on mount /}
, rootElement)``