@vormadal/react-mui NPM

vormadal/react-mui

This library contains a collection of hooks and components that I have found useful in my React projects.

Installation

Using npm

npm install @vormadal/react-mui

This library is intended to be used with the following libraries:

react-router-dom
@mui/material
@mui/icons-material
@emotion/react
@emotion/styles

Components

Toaster

Loading

The <Loading /> component is used when you want to show a spinner while data is loading. The component works very well with the useData hook where the hook values can be forwarded to the <Loading /> component.
As long as there is no data the children will not be rendered. This way you don't have to check if data is defined or not.

Example

function MyComponent(){
    // result is an object containing 'loading', 'data' and 'error'
    const [result] = useData(() => /* make api call and return response */)
    return (<Loading {...result}>
        {/* data is the content of the value returned from the function passed to the useData hook */}
        {(data) => <div>{data.id}</div>}
      </Loading>)
}

Props

Name	Type	Description	default	required
loading	boolean	If true and `data` has no value a spinner is shown	false	no
error	string	Shows an alert containing this error message	''	no
data	any	the data which will be passed to the `children` function when loading is complete	undefined	no
showReloads	boolean	If true the spinner will be shown everytime `loading` is true.	false	no
retry	function	If specified, the alert will show a `retry` button which when clicked will run this function	undefined	no
children	function	A function which returns the child elements to be rendered. The `data` will be passed as argument. This function will only be called when `data` contains data	undefined	no