Khange

Higher Order Component for on start and on props change logic.

Setup

npm i -S khange

Use

import khange from 'khange'

const functionThatChecksWhetherIncomingPropsHaveChanged = (oldProps /* this.props or {} if onStart */, nextProps) => {
    return oldProps.name === nextProps.name;
}

const onChange = (props)=>props.loadNewData();

khange(functionThatChecksWhetherIncomingPropsHaveChanged, onChange)

Kheck

A simple utility function that takes any number of string arguments and checks whether the new prop is different that the old old

kheck('user.name') === (props, nextProps)=>(props.user.name === nextProps.user.name)
kheck('user.name', 'date') /* checks both properies, and if either one is not equal, returns false */

Example

import khange, {kheck} from 'khange'

const Simple = ()=><div>Hello</div>

const SimpleWithOnChange = khange(kheck('simple'), (props)=>props.loadMoreData())

// loadMoreData on mount and when ever the simple prop changes then loadMoreData

Advanced Example

import khange, {kheck} from 'khange'

const Simple = ()=><div>Hello</div>

const SimpleWithOnChange = khange([kheck('simple'), (props)=>props.loadMoreData(), kheck('advanced'), (props)=>props.loadMoreAdvancedData()])

// run multiple checks for changes and different onChange functions when those equality functions fails