Hooks

Hook in React let you use state and other React features without writing a class.

useAPI A hook setup to use API calls. Automatically makes GET request. By default displays errors.

T - The type of data expected to be returned.

url - The URL to request the data from.

method - The REST method to use for the request, options include GET, POST, PUT and DELETE. Default GET

The return of this hook has 5 parts in an array:

• response which is the most recently returned data.
• loading a boolean which represents if a request is in a pending state.
• request() a function that makes the request, any arguments passed in will be passed into the axios call.
• error which is any errors that occurred with the request, this is reset if a new request is made without errors.
• reset() a function that resets all errors and responses

useForm - A hook used to simplify the process of building forms

S - The state data interface for the form

initial - The initial state of the form

The return of this hook has four parts in an object:

• state the current state of this form
• handleBoolChange() a function intended to be used with a checkbox to update state on changes
• handleStringChange() a function intended to be used with a input box to update state on changes
• handleFileChange() a function intended to be used with a file input to update state on changes
• handleSubmitBuilder() a function used to create handleSubmit

Example

const { request } = useAPI("/some/data", "POST");
const { handleBoolChange, handleSubmitBuilder, state } = useForm({ enabled: true});
const handleSubmit = handleSubmitBuilder(request);
...
<form onSubmit={handleSubmit}>
   <input type="checkbox" onChange={handleBoolChange("enabled")} value={state.enabled} />
</form>

useLocalStorage - A hook used to store data in Local Storage to so that it persist reloads

T - The type of data being stored

key - The key to use in Local Storage

initialValue - The initial value of the data if it is not found in Local Storage

The return of this hook has four parts in an object:

• value the current value
• setValue() set the current value
• updateValue() refresh the current value from local storage
• removeValue() remove the current value including in local storage

Note: This value will update automatically when other windows change the value, but manual updates must be done when changing within this application. See: https://stackoverflow.com/questions/35865481/storage-event-not-firing