react-read-less-more

React Read More Less

[]

Install

npm install react-read-less-more --save

Usage

import ReactReadLessMore from 'react-read-less-more';
 
class ReadMoreAndLessText extends Component {
    render() {
        return (
            <ReactReadLessMore lessText="Show Less" moreText="Show More" displayCount={2} >
            <span>Java ,</span>
            <span>SQL </span>
            <span>HTML</span>
            <span>JavaScript</span>
        </ReactReadLessMore>
        );
    }
}

Usage

import ReactReadLessMore from 'react-read-less-more';
const data1 = [{label:"C"},{label:"Java"},{label:"Go"},{label:"Javascript"},{label:"HTML"},{label:"CSS"},{label:"REACT"},{label:"JQUERY"}];
 
const data2 = ["C","Java","Go"];
 
class ReadMoreAndLessText extends Component {
    render() {
        return (
            <ReactReadLessMore lessText="less" moreText="more"  displayType="CHIP"  deleteChip={(data)=>{}}
            onClick={(data)=>{}}
        dataSeparator="" displayCount={2} displayKey="label" data={data}>
        </ReactReadLessMore>
        );
    }
}

PROPTYPES

Prop	Type	Default
clsName	String
charLimit	integer	30
moreText	String	Read more
lessText	String	Read less
displayType	String	for displaying as chip( displayType = "CHIP")
dataSeparator	String	to separate each data item (',' or ';')
data	Array	input data array to display.data can be array objects or array of string/number
displayKey	String	attribute in the input data, example given above
dataItemClass	String	To customize the data item,pass your custom css class in dataItemClass
onClick	String	To add on click event on element, pass ypur method onClick prop,it will return the data item in input array
deleteChip	String	event will be added to cross icon,to enable add event on element
deleteIcon	String	To customize the delete icon pass the css class name
autoClose	String	To enable open only one at time , (In progress )

react-read-less-more