React-eventist NPM

react-eventist

Attach pre/post async actions to React event handlers.

Installation

react-eventist is only distributed as a CommonJS module and requires React 0.14 or later.

npm i --save react-eventist

Documentation

`<Eventist pre post>`

Makes the specified pre and post functions available to the connectEventist calls.

`pre`/`post` `([event], [props], [next])`

The pre/post props are collections of functions that receive the handled event, wrapped components props, and a next function. The next function is called to move to the next action if available or to enter/exit the handler if no intermediate steps remain.

Props

pre - Array<Function> - Array of functions called before the event handler is called.
post - Array<Function>- Array of functions called after the event handler is called.

Example

import { Eventist } from 'react-eventist'

const pre = [(event, props, next) => { console.log('before'); next(); }];
const post = [(event, props, next) => { console.log('after'); next(); }];

ReactDOM.render(
  <Eventist pre={pre} post={post}>
    <App />
  </Eventist>
)

`createEventist([eventistKey])`

Creates an Eventist component with a unique eventistKey to allow for secondary Eventist providers.

Parameters

eventistKey - String - Unique key to be used to provide and receive the pre/post actions.

Example

import { createEventist } from 'react-eventist'
const HistoryEventist = createEventist('history')

const post = [(event, props, next) => { console.log('redirecting'); next() }];

ReactDOM.render(
  <HistoryEventist post={post}>
    <App />
  </HistoryEventist>
)

`connectEventist([component], [handler], [options])`

Connects a component to the Eventist provider and runs all pre/post functions on the specified handler. Allows for a custom eventistKey to be provided through the options;

It also provides an inProgress prop to the wrapped component (can be changed through the mapInProgressToProps option) that specifies if the component is in any pre/post actions.

`options`

eventistKey - String? - Optional key to connect to a custom Eventist Provider.
mapInProgressToProps - Function? - Optional function to map the inPre, inEvent and inPost state values to a prop for the wrapped component.

Example

import { connectEventist } from 'react-eventist'

const RouteButton = ({ onClick, inProgress }) =>
  <button type="button" onClick={onClick} disabled={inProgress}>
    Click
  </button>

export default connectEventist(RouteButton, 'onClick')