Skip to content
This repository has been archived by the owner on Mar 7, 2019. It is now read-only.
/ react-handler Public archive

A react-component for handling typical react/redux-states

License

Notifications You must be signed in to change notification settings

chrishelgert/react-handler

Repository files navigation

React-Handler

npm version Build Status Build status codecov Standard - JavaScript Style Guide

A react-component for handling typical react/redux-states (loading, error, ...)

Usage

npm install react-handler --save

Handler

import 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)

Sub-Handler

Loading

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

Error

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

Empty

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

ErrorEmptyHandler

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.

Contributing

  • Fork and clone this repository
  • Make your changes
  • Check tests and linter
  • Commit & push your changes
  • Create pull request

License

Copyright (c) 2016-present Chris Helgert. See License for details.

About

A react-component for handling typical react/redux-states

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published