This project was seed with need requirement for react project!.

Table of Dependencies

• formik for handle form validation (yup Object schema).
• react-toastify for React notification made easy.

 import React, { Component } from 'react';
  import { toast } from 'react-toastify';

  class Position extends Component {
    notify = () => {
    toast("Default Notification !");

    toast.success("Success Notification !", {
      position: toast.POSITION.TOP_CENTER
    });

    toast.error("Error Notification !", {
      position: toast.POSITION.TOP_LEFT
    });
    
    toast.warn("Warning Notification !", {
      position: toast.POSITION.BOTTOM_LEFT
    });

    toast.info("Info Notification !", {
      position: toast.POSITION.BOTTOM_CENTER
    });

    toast("Custom Style Notification with css class!", {
      position: toast.POSITION.BOTTOM_RIGHT,
      className: 'foo-bar'
    });
  };

    render(){
      return <button onClick={this.notify}>Notify</button>;
    }
  }

• react-intl-universal for multilingual (internationalization) website.

import intl from 'react-intl-universal';

{intl.get('SIMPLE')}
{intl.get('HELLO', {name:'H4mit', where:'Aroin'}) // "with parameters"
// { "TIP": "This is <span style='color:red'>HTML</span>" }
{intl.getHTML('TIP');} // with renderer HTML 
{intl.get('SIMPLE').d('default message')} // with default value.

• BizCharts for show chart and graph in the dashboard.
• ag-grid for show and manage data table.
• react-datepicker2 for use datepicker (jalaali and gregorian supported).
• lodash A modern JavaScript utility library delivering modularity, performance, & extras.

import _ from 'lodash'
_.merge({}, {foo: 'bar'})

• Axios Handle Rest API (Promise based HTTP).

const axios = require('axios');

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });

• js-cookie A simple, lightweight JavaScript API for handling browser cookies.

Cookies.set('name', 'value', { expires: 7, path: '' });
Cookies.get('name'); // => 'value'

• react-loadable for show loading after load component.
• material-ui for ui component.
• vazir-font for persian font.

other ui library for react

• mdbootstrap
• ant.design
• evergreen

Supported

If you have ideas for more “How To” recipes that should be on this page, Issues