react-hightlight-text
Highlight a keyword in a piece of text and return a React element.
Installation
npm i react-highlight-elementBasic Usage
import React from 'react';
import HighlightText from 'react-highlight-element';
export default function Demo() {
return (
<HighlightText text="This is react component" highlight="react" />
);
}import React, { useState, Fragment } from 'react';
import HighlightText from 'react-highlight-element';
export default function Demo() {
const [value, setValue] = useState('react');
return (
<Fragment>
<input value={value} onChange={(evn) => setValue(evn.target.value)} />
<HighlightText text="This is react component" highlight={value} />
</Fragment>
);
}Color
import React, { useState, Fragment } from 'react';
import HighlightText from 'react-highlight-element';
export default function Demo() {
const [value, setValue] = useState('react');
return (
<Fragment>
<input value={value} onChange={(evn) => setValue(evn.target.value)} />
<HighlightText text="This is react component" highlight={value} color="red" />
</Fragment>
);
}Background Color
import React, { useState, Fragment } from 'react';
import HighlightText from 'react-highlight-element';
export default function Demo() {
const [value, setValue] = useState('react');
return (
<Fragment>
<input value={value} onChange={(evn) => setValue(evn.target.value)} />
<HighlightText text="This is react component" highlight={value} backgroundColor="white" />
</Fragment>
);
}API
export interface HighlightTextI {
text: string,
highlight: string,
color?: string,
backgroundColor?: string
}License
Licensed under the MIT License.