Ajax Component

Ajax Component is an extendable React Component that gives you enter and exit classes automatically as the component mounts, unmounts, and makes new API requests.

Config

Edit the config object like so:

import { config } from 'react-ajax-component';

config.apiMethod = 'GET';

• apiMethod String (default: 'POST') The type of method to fetch the API request.

• apiHeaders Object (default: { 'Content-Type': 'application/json' }), Headers to include in API requests.

Props

• timeout Number (default: 1000) Duration to hold the enter and exit classes.

• classNamePrefix String (default: 'is') A string to append to the beginning of the enter and exit classes.

Lifecycle Methods

When building out an extended class, here are the methods that you will likely need to edit, depending on your needs.

• shouldFetchData( nextProps: Object ): Boolean Used to determine if a new API request should be made. If shouldFetchData returns true, the old state of the Component will be mock unmounted and new data will emulate the appearance of a new Component.

• resolveData( nextProps: Object ): Promise The logic that handles making the API request.

• apiEndpoint( nextProps: Object ): String The url to send API request to.

• apiPayload( nextProps: Object ): Object The data to include in the API request.

• onDataUpdate() A function to be called after each API request has completed.

• renderError(): ReactElement | null A React render function that will be used in the event of an API error. Note: this.state.data will be null and this.state.errors will be true.

• renderLoader(): ReactElement | null A React render function that will be used before the API has responded. Note: this.state.data will be null at this point.