helior/react-highlighter

:high_brightness: Highlight text using React

react-highlighter

Highlight select fragments of a string using an HTML element and/or a class.

Installation

npm install react-highlighter --save

Usage

var Highlight = require('react-highlighter');

<Highlight search="brown">The quick brown fox jumps over the lazy dog</Highlight>

Props

• search: The string of text (or Regular Expression) to highlight
• caseSensitive: Determine whether string matching should be case-sensitive. Not applicable to regular expression searches. Defaults to false
• ignoreDiacritics: Determine whether string matching should ignore diacritics. Defaults to false
• diacriticsBlacklist: These chars are treated like characters that don't have any diacritics. Not applicable ignoreDiacritics is false. Defaults to none
• matchElement: HTML tag name to wrap around highlighted text. Defaults to mark
• matchClass: HTML class to wrap around highlighted text. Defaults to highlight
• matchStyle: Custom style for the match element around highlighted text.

Development

Testing

Using Mocha/Chai/React.addons.TestUtils for testing.

npm test

Code Coverage

Generate a report using Istanbul to make sure your tests are touching everything! FYI, Travis will fail the build if there isn't at least 90% of statement coverage and 100% function coverage.

npm run coverage

Coveralls.io integration requires that the environment variable COVERALLS_REPO_TOKEN is set.

react-highlighter's Issues

Use <mark> instead of <strong>

As per realization of http://w3c.github.io/html-reference/b.html

make `create-react-class` and `prop-types` as runtime dependencies

as per ec2ae09 create-react-class and prop-types are declared as devDependencies which leads to errors if we have our own build-system instead of npm which just relies on run time dependencies.

Throws when search contains '\'

Hi, I send string values into search prop, but it throws (e.g. Uncaught SyntaxError: Invalid regular expression: /hello wor\/: \ at end of pattern) when the user enters backslash ''.

What would be the correct way of handling this, inside or outside of the component?

Highlighter breaks when searching for special characters

First, thank you for building this neat react component.

I've found a bug where passing any special character breaks the internal regex matching in Highlighter Component.

Here's a demo demonstrating the bug:
https://codesandbox.io/s/204r9kz6lj

The 'search' property should accept 'null' or 'undefined' value

When there is nothing to search, the 'search' property of the component should accept null or undefined value to signify that nothing should be searched and the component should return the child 'as is'.

Currently, React throws

Warning: Failed prop type: The prop `search` is marked as required in `Highlighter`, but its value is `null`.
warning.js:33
    in Highlighter

when null is passed to the 'search' prop.

Add support for regex with global flag.

Regular expressions with a global flag are not working right. The code uses regex.test() and regex.exec(), both increasing an internal lastIndex counter.

For example:

<Highlight search=/brown|jumps/g">The quick brown fox jumps over the lazy dog</Highlight>

will only highlight 'jumps' because the first conditional search.test(remainingCleaned) will move the lastIndex counter right after the 'brown' keyword. search.exec(subject) will then only find 'jumps'.

Extract out search logic into a separate export

I'd be extremely helpful to extract out the search logic into a separate export that can be used outside JSX code.

Problem

I have a text toggle component that shows/hides text. I also have a search box that can search for text. If I haven't toggled the text component and I search I still want to know the number of hits that a search would highlight. I can't easily do this now without duplicating logic between this component and my search component.

Solution

If we extract out the search logic into a separate export, I could generate my RE, do the search, get the number of hits, then when I toggle the text view, render Highlight with the same RE and I should have the same number of hits as I do highlights.

Request missing from package.json

npm test with fresh checkout:

Error: Cannot find module 'request'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:581:15)
at Function.Module._load (internal/modules/cjs/loader.js:507:25)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:20:18)
...

Continuous Integration

Feature request: option to set element type (currently it is span)

Feature request: Option to highlight only the first instance of `search`

It would be nice to have the option to only highlight the first instance of the search string instead of all instances. One use case for this would be search functionality where you're highlighting user input. With one character entered, there are potentially several matches.

Is this abandonware?

If anyone's interested, I've rewritten this in typescript, since I have code that relies on it but the dependencies in this lib are woefully out of date.

https://github.com/chadlavi/react-highlighter-ts

Needs Tests

❤️

Prop-Types and Create-React-Class are DevDependencies

As the title implies these two components are DevDependencies and aren't being installed properly on an NPM Install of React-Highlighter.

Integrate w/ Github Releases

Use npm run dist to generate packaged distribution files (including minified variants) and publish those as Github Releases.

don't work it in nested Component and DOM?

ex:

<Highlight search={query}>
    <Para />
</Highlight>

<Para>
    <p>test test test test</p>
    <ul>
        <li>test</li>     
        <li>test</li>     
        <li>test</li>     
    </ul>
</Para>

Does not support updated versoin of React

Because of peer dependency, the npm error can't be resolved for updated versions of React (e.g. 17.0.2)

Publish UMD files generated by Webpack

The npm package does not include any browser-friendly UMD builds because the dist directory is missing from files in package.json.

Instructions to fix (see suggested workflow): https://unpkg.com/

Deprecation warning for React.DOM.span

I'm using https://github.com/ericgio/react-bootstrap-typeahead which depends on your module. Since I added it, I noticed a deprecation warning which I could track down to react-highlighter:

Warning: Accessing factories like React.DOM.span has been deprecated and will be removed in v16.0+. Use the react-dom-factories package instead. Version 1.0 provides a drop-in replacement. For more info, see https://fb.me/react-dom-factories

This is caused by this line:

react-highlighter/lib/highlighter.js

Line 177 in 7abda7d

return React.DOM.span({'key': this.count}, string);

Would be great if this could be fixed. Thanks and keep up the good work!

[PropTypes] Allow React components for matchElement

Hi @helior and many thanks for your library! With react-highlighter I got from zero to all done in just 10 minutes, which is mind-blowing even in the React world!

I'm writing to share a minor issue I've faced when using <Highlight /> together with styled-components. Here's my code:

import styled from "styled-components";

const HighlightMark = styled.span`
  background: rgba(255, 255, 0, 0.3);
  border-radius: 4px;
  display: inline-block;
  margin: auto -3px;
  padding: 0 3px;
`;

// ... 

<Highlight search={highlightRegexp || false} matchElement={HighlightMark}>
  {text}
</Highlight>

This produces a warning in development environment:

Warning: Failed prop type: Invalid prop `matchElement` of type `function` supplied to `Highlighter`, expected `string`.

It'd be great if matchElement in PropTypes allowed using custom react components in addition to strings. The issue is only with the warning – all working great apart from that 🎉

Suppress new React deprecation warnings

React will be removing createClass and PropTypes in React 16.

"Warning: Accessing PropTypes via the main React package is deprecated. Use the prop-types package from npm instead."

"Warning: Highlighter: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement."

Release to CDNJS

onClick handler not fired on children

<Link to='/home' onClick={this.onItemClick}>
  <i className="fa fa-file"></i>   
  <span id='works'>Click me - I work!!</span>
  <Highlighter search={this.props.query} caseSensitive={false}>
    {this.props.name}
  </Highlighter>
</Link>

this.onItemClick is only invoked when clicking on span#works. However, clicking any of the elements from Highlighter doesn't actually propagate the event in any way. I've found that it does work when I remove {'key': this.count} from the children in the array.

getDefaultProps usage

I get lots of these warnings in the browser dev tools console:

Warning: getDefaultProps is only used on classic React.createClass definitions. Use a static property named defaultProps instead.

It would be great if this library could be updated to not use getDefaultProps.
I see this is on line 24 of https://github.com/helior/react-highlighter/blob/master/lib/highlighter.js.

Support [email protected]

Current semver is requiring [email protected]

Highlighter Crashes on Numeric Values

Summary

Wrapping a numeric value in a Highlight component utilizing the search property has the potential to cause a TypeError.

Expected Behavior

The Highlighter should show the matching string within the return results. Here is an example of this working as expected with the search term of "test".

How to Replicate

Using the first image as an example, if the value of cell is numeric (ex. 1234 instead of "1234"), and the value of query is a partial match (ex. 123), the component breaks, citing the following:

Workaround

A workaround for this issue is to either call the toString() method or wrap the value in a String constructor.

Cannot apply unknown props to html elements.

In React 15.1.0 I am getting this warning in the console:

Warning: Unknown props search, caseSensitive, matchElement, matchClass, matchStyle on <span> tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop

This occurs from applying non standard props to an HTML element. i.e. <span search='string'>.

Thanks for your work on this project. 🙇

Issue when search starts or ends with whitespace

Due to the way React deals with whitespace in span, sometimes results can be a bit janky:

<Highlight search='s '>This is my test</Highlight>

Expected result: This is my test
Actual result: Thisismy test

I guess because React is doing:

<span>Thi</span>
<span>s </span>
<span>i</span>
<span>s </span>
<span>my test</span>

and ignores the whitespace inside <span>s </span> because it isn't part of a string.

Mismatches boundaries \b and ^

Although 'abc'.match(/\b\w/) equals ['a'] in JavaScript, react-highlighter acts as if it equals ['a', 'b', 'c'] instead. That is, the JSX element

<Highlight search={/\b\w/}>
  abc
</Highlight>

renders as abc instead of abc. (To verify that individual letters are being matched, rather than the entire string of all three letters, alter the matchClass prop so that it draws a border around matches instead of emboldening them.) Strangely, no problems arise with the expressions /\w\b/ and /\b\w\b/.

A similar problem occurs with anchors: substituting /^\w/ for /\b\w/ in the JSX element displayed above renders abc instead of abc, whereas /\w$/ and /^\w$/ behave as expected.

Option to select which classname to use as highlighted text

current default is highlight

React-Native compatibility?

Would be nice to make this compatible with React-Native, removing all references of HTML to let the freedom to use React-Native components instead html.

Compile distributable UMD library file

Set up a demo page

Regular Expression

Thanks for sharing your component.

Would be useful if your component would accepts regular expression.

Feature request: multiple terms with different marks?

sooo ... an alternate syntax that goes something like this :

let searchMarks = {[
  {search:"abc", matchElement: "markOrange"},
  {search:"def", matchElement: "markBlue"},
  {search:"ghi", matchElement: "markYellow"},
]}

<Highlight searchMarks={searchMarks}>{sometext}</Highlight>

The requirement is to be able to use multiple search terms and define a separate highlight for each so different highlight colours can be used for each term.

I did have a go at nesting a Highlight tag with in itself (but with a different search and mark) but only the inner most Highlight seems to get executed.

Option to select which element to wrap around the highlighted text

current default is strong