A react-component for handling typical react/redux-states (loading, error, ...)
npm install react-handler --saveimport handler from 'react-handler'; import ArticleList from './ArticleList'; class Example extends Component { // ... state = { loading: true, error: '', articles: this.props.articles, }; // ... render() { return ( <Handler loading={this.state.loading} errorMessage={this.state.error} loadingMessage="loading..." emptyMessage="0 Articles found" checkedProperty={this.state.articles} > <ArticleList articles={this.state.articles} /> </Handler> ); } }Configuration
- All params from Subhandler´s will be available in Handler (Messages will only be prefixed)
- showComponentWhileLoading - will show you´re Component while your data is loading (default: true)
import { LoadingHandler } from 'react-handler'; import ArticleList from './ArticleList'; class Example extends Component { // ... state = { loading: true, articles: this.props.articles, }; // ... render() { return ( <LoadingHandler loading={this.state.loading}> <ArticleList articles={this.state.articles} /> </LoadingHandler> ); } }Configuration:
- LoadingComponent - Define your own LoadingComponent
- loading - Is loading in process
- message - Define your own Loading-Message
import { ErrorHandler } from 'react-handler'; import ArticleList from './ArticleList'; class Example extends Component { // ... state = { error: '', articles: this.props.articles, }; // ... render() { return ( <ErrorHandler message={this.state.error}> <ArticleList articles={this.state.articles} /> </ErrorHandler> ); } }Configuration:
- ErrorComponent - Define your own ErrorComponent
- message - Error-Message, also used for error-check
import { EmptyHandler } from 'react-handler'; import ArticleList from './ArticleList'; class Example extends Component { // ... state = { articles: this.props.articles, }; // ... render() { return ( <EmptyHandler message="0 Articles found." checkedProperty={this.state.articles}> <ArticleList articles={this.state.articles} /> </EmptyHandler> ); } }Configuration:
- EmptyComponent - Define your own EmptyComponent
- checkedProperty - Property, which should not be empty
- message - Define your Empty-Message
import { EmptyHandler } from 'react-handler'; import ArticleList from './ArticleList'; class Example extends Component { // ... state = { articles: this.props.articles, error: '', }; // ... render() { return ( <ErrorEmptyHandler errorMessage={this.state.error} emptyMessage="0 Articles found." checkedProperty={this.state.articles} > <ArticleList articles={this.state.articles} /> </ErrorEmptyHandler> ); } }Configuration:
- Combines both Configuration´s from EmptyHandler and ErrorHandler, the messages will only be prefixed.
- Fork and clone this repository
- Make your changes
- Check tests and linter
- Commit & push your changes
- Create pull request
Copyright (c) 2016-present Chris Helgert. See License for details.