react-pending
You’re using pure components, maybe even using stateless functional components. You love them because they keep your code clean:
{ return <ul> items </ul> ;} { return <p class='error'> error </p> ;}
However, they expect every prop to be present: rendering this component with
undefined
/null
props will raise an exception. This is common if your content
is asynchronously loaded.
react-pending can be used to substitute a different component until the passed props have been loaded. Its declarative API allows render methods to be kept clean, without if statements or ternaries.
In the example below, LoadableList
is substituted for List
– it
accepts the exact same props, but will render with a spinner if items
is not
yet defined.
;;; ; const spinnerUnless = ; // Will only render using `List` if `items` is present, otherwise renders a spinnerconst LoadableList = List ErrorMessage; /* ... componentDidMount(), etc ... */ { return <LoadableList items= thisstateitems error= thisstateerrorLoading />; }
If you just to want to check for the presence of every prop, pass no arguments
to the result of pending()
:
const spinnerUnlessReady = ; // Will only render using `List` if passed props are all ready, otherwise// renders a spinnerconst LoadableList = ;
Installation
npm install react-pending --save