Morioh
Login
Andrew Rhodes

Andrew Rhodes

10 months ago

How to Highlight a Keyword in Text with React

 A React component that highlights a keyword in a piece of text and returns a React element.

Highlight keyword

Installation

npm i react-keywords

Basic Usage

import React from 'react';
import Keywords from 'react-keywords';

export default function Demo() {
  return (
    <Keywords value="react">
      Highlight a keyword in a piece of text and return a React element.

      React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

      Build encapsulated components that manage their own state, then compose them to make complex UIs.
    </Keywords>
  );
}

 

import 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.

        React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

        Build encapsulated components that manage their own state, then compose them to make complex UIs.
      </Keywords>
    </Fragment>
  );
}

 

render

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>
  );
}

 

color

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>
  );
}

 

caseIgnored

Case is ignored by default caseIgnored=true.

import React, { useState, Fragment } from 'react';
import Keywords from 'react-keywords';

export default function Demo() {
  const [value, setValue] = useState('re');
  const text = `caseIgnored={true} Highlight A Keyword In A Piece Of Text And Return A React Element.`
  return (
    <Fragment>
      <input value={value} onChange={(evn) => setValue(evn.target.value)} />
      <br />
      <Keywords value={value} color="red" backgroundColor="">
        {text}
      </Keywords>
      <br />
      <Keywords
        value={value}
        caseIgnored={false}
        children={`caseIgnored={false} Highlight a keyword in a piece of text and return a React element.`}
      />
    </Fragment>
  );
}

Support bundle

<!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>

API

import { FC, PropsWithChildren } from 'react';
export interface KeywordsProps {
  value?: string;
  color?: string;
  caseIgnored?: boolean;
  backgroundColor?: string;
  render?: (keyword: string, color: string, backgroundColor: string) => JSX.Element;
}
declare const KeywordsInner: FC<PropsWithChildren<KeywordsProps>>;
export default KeywordsInner;

License

Licensed under the MIT License.

 

View on GitHub: https://github.com/uiwjs/react-keywords 

#react  

How to Highlight a Keyword in Text with React
1.10 GEEK