Highlight a keyword in a piece of text and return a React element.
npm i react-keywordsimport React, { useState, Fragment } from 'react';
import Keywords from 'react-keywords';
export default function Demo() {
const [value, setValue] = useState('react');
return (
<Fragment>
<input value={value} onChange={(evn) => setValue(evn.target.value)} />
<Keywords value={value}>
Highlight a keyword in a piece of text and return a React element.
</Keywords>
</Fragment>
);
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/@babel/standalone@7.18.10/babel.min.js" crossorigin></script>
<script src="https://unpkg.com/react@18.x/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18.x/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@uiw/codepen-require-polyfill/index.js" crossorigin></script>
</head>
<body>
<div id="container" style="padding: 24px"></div>
<script src="https://unpkg.com/react-keywords/dist/keywords.min.js"></script>
<script type="text/babel">
import Keywords from 'react-keywords';
function Demo() {
const [value, setValue] = React.useState('react');
return (
<React.Fragment>
<input value={value} onChange={(evn) => setValue(evn.target.value)} />
<Keywords value={value}>
Highlight a keyword in a piece of text and return a React element.
</Keywords>
</React.Fragment>
);
}
const container = document.getElementById('container');
const root = ReactDOM.createRoot(container);
root.render(<Demo />);
</script>
</body>
</html>import React, { useState, Fragment } from 'react';
import Keywords from 'react-keywords';
export default function Demo() {
const [value, setValue] = useState('react');
const highlight = (txt) => <span style={{ background: 'red', color: '#fff' }}>{txt}</span>;
return (
<Fragment>
<input value={value} onChange={(evn) => setValue(evn.target.value)} />
<Keywords value={value} render={highlight}>
Highlight a keyword in a piece of text and return a React element.
</Keywords>
</Fragment>
);
}import React, { useState, Fragment } from 'react';
import Keywords from 'react-keywords';
export default function Demo() {
const [value, setValue] = useState('react');
const highlight = (txt) => <span style={{ background: 'red', color: '#fff' }}>{txt}</span>;
return (
<Fragment>
<input value={value} onChange={(evn) => setValue(evn.target.value)} />
<Keywords value={value} color="red" backgroundColor="">
Highlight a keyword in a piece of text and return a React element.
</Keywords>
</Fragment>
);
}export interface KeywordsProps {
value?: string;
children?: string;
color?: string;
backgroundColor?: string;
render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
}
export default function Keywords(props: KeywordsProps): JSX.Element | undefined;As always, thanks to our amazing contributors!
Made with action-contributors.
Licensed under the MIT License.