This project was seed with need requirement for react project!.
- 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.
If you have ideas for more “How To” recipes that should be on this page, Issues