react-menthol

React dom elements extensively used while creating components.

To install using npm or yarn

npm install react-menthol --save;
or 
yarn add react-menthol;

Usage

import { Error, Loading, Maintenance, NoData, Tooltip, Legend } from 'react-menthol';
import 'react-menthol/menthol.css';

Packages

• Error
• Loading
• Maintenance
• NoData
• Tooltip
• Legend

Error

This component is used to show/hide a clean representation for error msg.

import { Error } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Error             
            error="Pass the error over here"
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

| @param | dataType | explaination | defaultValue | Required | |----------|------------|-----------------|----------------|------------| | error | string | pass the error msg | false | yes |

You can pass classes also as a prop

| className Prop | className used | |----------------|----------------| |classNameErrorWrapper| "consume"| | className| "consume"| | classNameOctagon| "shape-octagon"| | classNameErrorMsg| "error-msg"| | classNameError| "error-label"| | classNameShape| "error-shape"| | classNameClose | "error-close"|

Loading

This generic component is used for displaying loading icon on the doms when needed. It has two features to either use a existing set of svg elements or use a image to show loading.

import { Loading } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Loading             
                loadSvg= false
                svgType='balls'
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

| @param | dataType | explaination | defaultValue | Required | |----------|------------|-----------------|----------------|------------| | loadSvg | boolean | load predefined svg images | false | optional | | svgType | string | choose from existing svgs balls,bars,bubbles,cubes,spin,spinningBubbles,spokes | "balls" | true, when loadSvg is true |
| loadingImg | path | path to the images | | optional, used when loadSvg is false | | alt | string | when image is not available | img not found | optional | |width| string | width of image |'90px'| optional | |height| string | height of image | '90px'| optional | | marginLeft| string | margin-left |'35%'| optional | |marginTop| string | margin-top| '5%'| optional | |styles | style Object | additional styles | {}| optional | |classNameWrapper| string | | 'consume'| optional | |classNameImg | string | | '' | optional |

Maintenance

This Component is used when its parent is still under development/not available at the moment

import { Maintenance } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Maintenance             
            heading= `We'll be back soon!`
            paragraph= `Sorry for the inconvinence,but we're performing some maintenance at the moment`
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

| @param | dataType | explaination | defaultValue | Required | |----------|------------|-----------------|----------------|------------| | src | path | path of image | '../public/images/underProgress.gif' | optional | |alt | string | msg when img not found | 'img not found' | optional | |width| string | | '100px'| optional | |height| string | | '75px'| optional | |heading| string | heading |"We'll be back soon!"| optional | |paragraph| string | string | "Sorry for the inconvinence,but we're performing some maintenance at the moment"| optional | |classNameWrapper| string | | 'consume'|optional | |classNameImg| string | | '' | optional |

NoData

This generic component is used in the components to show beautifully when the data is empty.

import { NoData } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <NoData             
            heading= `No Matching items found!`,
            paragraph= `check the settings or refresh `,
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

| @param | dataType | explaination | defaultValue | Required | |----------|------------|-----------------|----------------|------------| |heading| string | heading |"No Matching items found!" | optional | |paragraph| string | string | "check the settings or refresh " | optional | |classNameWrapper| string | | 'chtr-No-data-wrapper' | | |classNameHeading| string | | "noData-heading" | | |classNameIconDiv | string | | noData-iconDiv" | | |classNameParagraph | string | | "noData-paragraph" | |

Tooltip

This is a generic component for tooltip, which accepts

• array of objects with keys as key, alias and color
• dataObj which contains actual data The data passed is looped and check if the key is present in dataObj then it will display.
• An additional prop of heading can also be added to show the heading of tooltip
• Tooltip data can also be array of strings representing the key names from dataObj that needs to be displayed.

Note This is just a generic comp, user needs to position this tooltip accordingly to its usage

import { Tooltip } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Tooltip             
		    data = [ {key : x, alias:"Xvalue", color:"black"},{key : y, alias:"Yvalue", color:"black"}]
		    dataObj= { x: 1, y:2 ,z: 4 }
		    heading= "",
		/>
        </div>
      document.getElementById( 'app' ) 
);

Params passed

| @param | dataType | explaination | defaultValue | Required | |----------|------------|-----------------|----------------|------------| |data | array | array of objects with keys key,alias, color | [] | yes | | dataObj | object | actual data object containing information | {} | yes | |heading| string | heading of tooltip | "" | optional | |regexForReplaceParamInHeading:| regexexp| any params in heading is replaced with its value from dataObj | "/${(.*?)}/g" | optional | |classNameWrapper| | |"consume"| | |classNameTooltip| | |"menthol-tooltip" | | |classNameTooltipHeading| | |"menthol-tooltip-heading" | |

Legend

• Generic component used to show the legend in horizontal or vertical format
• Data contains objects with keys as key, color, active
• Each key will be displayed and a color box is shown below it
• active prop is used to toggle legend , and can be accessed through onClick function and maintain whether its active or not

import { Legend } from 'react-menthol' ;  
import 'react-menthol/menthol.css';

render( 
        <div>
         <Legend             
                layout= "horizontal"
			    data = [{ key: "Example1", color:"#FFFFFF", active: true },
                { key: "Example2", color:"#000000", active: true }]
		        onClick = {this.handleClick}
             />
        </div>
      document.getElementById( 'app' ) 
);

Params passed

| @param | dataType | explaination | defaultValue | Required | |----------|------------|-----------------|----------------|------------| |layout | string |Accepts any one of "horizontal" or "vertical" | "horizontal" | optional | |data | array | Array of objects with keys key, color, active | [] | yes | |onClick | function | pass click information | | optional | |classNameWrapper| | | "consume" | | |classNameLegendWrapper| | | "legend-wrapper" | | |classNameLegendList| | | "legend-list"| | |classNameLegendTick | | |"legend-tick"| | |classNameLegendName| | | "legend-name"| |

For local development/demo

For building

npm run build

For Demo

npm run demo

go to file system and locate the react-menthol/demo/index.html

Icons used from react-icons