Text highlighting component for react applications

Overview

highlight-react

quickstart

Installation

npm i highlighter-react

#or

yarn add highlighter-react

How to use

import Highlight from 'highlight-react/dist/highlight'

const Demo = () => {
  const searchTerm = 'hello';

  return (
    <Highlight search={searchTerm}>
      <div>
        <h1>Hello world!</h1>
      </div>
    </Highlight>
  );
};

export default Demo;

Captura de Pantalla 2022-04-04 a las 15 56 16

You might also like...
🎭 A React Native and Expo library to mask text and inputs

This is a library to mask Text and Input components in React Native and Expo (Android, iOS and Web).

🌀 React library to safely render HTML, filter attributes, autowrap text with matchers, render emoji characters, and much more.

Interweave Interweave is a robust React library that can... Safely render HTML without using dangerouslySetInnerHTML. Safely strip HTML tags. Automati

Draw a scribbly underline underneath some text in React
Draw a scribbly underline underneath some text in React

UnderlineEmphasis This component draws a purple squiggly underline underneath whatever text children are passed in. Package uses tsdx as the build sys

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web Fluent UI web represents a collection of utilities, React components, and web components for building web applications. This repo is hom

⚡️ Simple, Modular & Accessible UI Components for your React Applications
⚡️ Simple, Modular & Accessible UI Components for your React Applications

Build Accessible React Apps with Speed ⚡️ Chakra UI provides a set of accessible, reusable, and composable React components that make it super easy to

A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design
A frontend Framework for building B2B applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Material Design

react-admin A frontend Framework for building data-driven applications running in the browser on top of REST/GraphQL APIs, using ES6, React and Materi

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.
react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui.

react-var-ui is a simple React component library for variable setting and preview, inspired by iOS settings, react-dat-gui and dat.gui. While some cod

react-health-card 🏥💳 An awesome react health card component.
react-health-card 🏥💳 An awesome react health card component.

react-health-card An awesome health card component. Installation yarn add react-health-card or npm install react-health-card --save Usage import Healt

React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Owner
Vladyslav Kapkan
Desarrollando ideas ✨ 💻
Vladyslav Kapkan
syntax highlighting component for react with prismjs or highlightjs ast using inline styles

React Syntax Highlighter Syntax highlighting component for React using the seriously super amazing lowlight and refractor by wooorm Check out a small

React Syntax Highlighter 2.8k Sep 30, 2022
🎁 Custom Input Text React - An Editable text input component for react.

?? Custom Input Text React - An Editable text input component for react.

Farsab B 1 Jun 4, 2022
A very simple component that allows you to add ellipsis to your texts when you do not want to display the entire text with the possibility of displaying the entire text

A very simple component that allows you to add ellipsis to your texts when you do not want to display the entire text with the possibility of displaying the entire text

Sebastian Korotkiewicz 2 Apr 17, 2022
React text ellipsify component

react-ellipsis-text Demo View Demo Installation npm install --save react-ellipsis-text API EllipsisText Props EllipsisText.propTypes

Mobilus Corporation 29 Jul 26, 2022
React component for automatically sized text that fits in its parent

Occamy Text Occamy is choranaptyxic, meaning it will grow or shrink to fit available space -- Fantastic Beasts and Where to Find Them React component

Dario Carella 8 Oct 11, 2019
This is a react component which made your text does not wrap and dynamically adjust the font size.

react-dynamic-font This is a react component which made your text does not wrap and dynamically adjust the font size Sometimes we want some text to ha

Zhao 33 Aug 30, 2022
Material-UI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.

Material-UI Quickly build beautiful React apps. Material-UI is a simple and customizable component library to build faster, beautiful, and more access

Material-UI 81.4k Sep 22, 2022
A React Component library for buliding modern applications easily & quickly.

A React Component library for building modern applications easily & quickly

Elementz 346 Sep 8, 2022
InvaUI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

Inva UI Sponsored by English • Table of Contents Quick start Install Install The easiest way to use Inva UI is to install it from npm $ npm install @i

Shaun Mak 4 Nov 8, 2021
A React JS PCF Code Component I created for model-driven applications

This control is a React JS PCF Code Component I created for model-driven applications. Model-driven applications do not allow mixed currency symbols on a form by default. While the underlining hidden control is dollars, the visual (this PCF control) shows the Euro Symbol.

Daniel Penrod 1 Mar 9, 2022