pax_global_header 0000666 0000000 0000000 00000000064 14363331727 0014523 g ustar 00root root 0000000 0000000 52 comment=b35d3f0b7d4ff9fe2ee03dbcdece917819d83dd0
react-highlight-words-0.20.0/ 0000775 0000000 0000000 00000000000 14363331727 0016001 5 ustar 00root root 0000000 0000000 react-highlight-words-0.20.0/.babelrc 0000664 0000000 0000000 00000000475 14363331727 0017402 0 ustar 00root root 0000000 0000000 {
"stage": 0,
"env": {
"development": {
"plugins": ["react-transform"],
"extra": {
"react-transform": {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}
}
}
}
}
react-highlight-words-0.20.0/.gitignore 0000664 0000000 0000000 00000000256 14363331727 0017774 0 ustar 00root root 0000000 0000000 # Logs
/log/*
!/log/.keep
/tmp
*.log
# Dependency directory
node_modules
# Test stuff
coverage
# OS X
.DS_Store
# Misc
node_modules
npm-debug.log
build
dist
# IDE
.idea
react-highlight-words-0.20.0/.npmignore 0000664 0000000 0000000 00000000077 14363331727 0020004 0 ustar 00root root 0000000 0000000 website
node_modules
karma.conf.js
src
webpack*
.idea
.babelrc
react-highlight-words-0.20.0/LICENSE 0000664 0000000 0000000 00000002071 14363331727 0017006 0 ustar 00root root 0000000 0000000 The MIT License (MIT)
Copyright (c) 2015 Treasure Data
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
react-highlight-words-0.20.0/README.md 0000664 0000000 0000000 00000010010 14363331727 0017250 0 ustar 00root root 0000000 0000000
React component to highlight words within a larger body of text.
Check out a demo [here](https://bvaughn.github.io/react-highlight-words).
## Usage
To use it, just provide it with an array of search terms and a body of text to highlight.
[Try this example in Code Sandbox.](https://codesandbox.io/s/5v8yqoxv7k)
```jsx
import React from "react";
import { createRoot } from "react-dom/client";
import Highlighter from "react-highlight-words";
const root = createRoot(document.getElementById("root"));
root.render(
);
```
And the `Highlighter` will mark all occurrences of search terms within the text:
## Props
| Property | Type | Required? | Description |
|:---|:---|:---:|:---|
| activeClassName | String | | The class name to be applied to an active match. Use along with `activeIndex` |
| activeIndex | Number | | Specify the match index that should be actively highlighted. Use along with `activeClassName` |
| activeStyle | Object | | The inline style to be applied to an active match. Use along with `activeIndex` |
| autoEscape | Boolean | | Escape characters in `searchWords` which are meaningful in regular expressions |
| className | String | | CSS class name applied to the outer/wrapper `` |
| caseSensitive | Boolean | | Search should be case sensitive; defaults to `false` |
| findChunks | Function | | Use a custom function to search for matching chunks. This makes it possible to use arbitrary logic when looking for matches. See the default `findChunks` function in [highlight-words-core](https://github.com/bvaughn/highlight-words-core) for signature. Have a look at the [custom findChunks example](https://codesandbox.io/s/k20x3ox31o) on how to use it. |
| highlightClassName | String or Object | | CSS class name applied to highlighted text or object mapping search term matches to class names. |
| highlightStyle | Object | | Inline styles applied to highlighted text |
| highlightTag | Node or String | | Type of tag to wrap around highlighted matches. Defaults to `mark` but can also be a React element (class or functional) |
| sanitize | Function | | Process each search word and text to highlight before comparing (eg remove accents); signature `(text: string): string` |
| searchWords | Array | ✓ | Array of search words. String search terms are automatically cast to RegExps unless `autoEscape` is true. |
| textToHighlight | String | ✓ | Text to highlight matches in |
| unhighlightClassName | String | | CSS class name applied to unhighlighted text |
| unhighlightStyle | Object | | Inline styles applied to unhighlighted text |
| unhighlightTag | Node or String | | Type of tag applied to unhighlighted parts. Defaults to `span` but can also be a React element (class or functional) |
| * | any | | Any other props (such as `title` or `data-*`) are applied to the outer/wrapper `` |
## Custom highlight tag
By default this component uses an HTML Mark Text element (``) to wrap matched text, but you can inject a custom
tag using the `highlightTag` property. This tag should be a React component that accepts the following properties:
| Property | Type | Description |
|:---|:---|:---|
| children | String | Text to be highlighted |
| highlightIndex | Number | Index of matched text |
For example:
```js
const Highlight = ({ children, highlightIndex }) => (
{children}
);
```
## Installation
```
yarn add react-highlight-words
```
```
npm i --save react-highlight-words
```
## License
MIT License - fork, modify and use however you want.
react-highlight-words-0.20.0/circle.yml 0000664 0000000 0000000 00000000130 14363331727 0017757 0 ustar 00root root 0000000 0000000 general:
branches:
ignore:
- gh-pages
machine:
node:
version: v5.1.0
react-highlight-words-0.20.0/karma.conf.js 0000664 0000000 0000000 00000001220 14363331727 0020351 0 ustar 00root root 0000000 0000000 module.exports = function (config) {
config.set({
browsers: ['PhantomJS2'],
frameworks: ['mocha'],
files: ['src/tests.js'],
preprocessors: {
'src/tests.js': ['webpack', 'sourcemap']
},
junitReporter: {
outputDir: (process.env.CIRCLE_TEST_REPORTS || 'public') + '/karma',
suite: 'karma'
},
singleRun: true,
plugins: [
require('karma-mocha'),
require('karma-webpack'),
require('karma-spec-reporter'),
require('karma-junit-reporter'),
require('karma-sourcemap-loader'),
require('karma-phantomjs2-launcher')
],
webpack: require('./webpack.config.test')
})
}
react-highlight-words-0.20.0/package.json 0000664 0000000 0000000 00000006011 14363331727 0020265 0 ustar 00root root 0000000 0000000 {
"name": "react-highlight-words",
"version": "0.20.0",
"description": "React component to highlight words within a larger body of text",
"main": "dist/main.js",
"scripts": {
"build": "npm run build:website && npm run build:dist",
"build:website": "npm run clean:website && cross-env NODE_ENV=production webpack --config webpack.config.website.js -p --bail",
"build:dist": "npm run clean:dist && cross-env NODE_ENV=production webpack --config webpack.config.dist.cjs.js --bail && cross-env NODE_ENV=production webpack --config webpack.config.dist.umd.js --bail",
"clean": "npm run clean:website && npm run clean:dist",
"clean:website": "rimraf build",
"clean:dist": "rimraf dist",
"deploy": "gh-pages -d build",
"lint": "standard",
"prebuild": "npm run lint",
"postpublish": "npm run deploy",
"start": "webpack-dev-server --hot --inline --config webpack.config.dev.js",
"test": "cross-env NODE_ENV=test karma start",
"watch": "watch 'clear && npm run lint -s && npm run test -s' src"
},
"repository": {
"type": "git",
"url": "git+https://github.com/bvaughn/react-highlight-words.git"
},
"author": "Brian Vaughn",
"license": "MIT",
"bugs": {
"url": "https://github.com/bvaughn/react-highlight-words/issues"
},
"homepage": "https://github.com/bvaughn/react-highlight-words#readme",
"keywords": [
"react",
"reactjs",
"react-component",
"highlighter",
"highlight",
"text",
"words",
"matches",
"substring",
"occurrences",
"search"
],
"standard": {
"parser": "babel-eslint",
"ignore": [
"build",
"dist",
"node_modules"
],
"global": [
"afterAll",
"afterEach",
"beforeAll",
"beforeEach",
"describe",
"it",
"jasmine"
]
},
"devDependencies": {
"babel": "^5.8.34",
"babel-core": "^5.8.34",
"babel-eslint": "^4.1.6",
"babel-loader": "^5.4.0",
"babel-plugin-react-transform": "^1.1.1",
"cross-env": "^5.1.3",
"css-loader": "^0.23.0",
"cssnext": "^1.8.4",
"cssnext-loader": "^1.0.1",
"expect.js": "^0.3.1",
"gh-pages": "^0.8.0",
"html-webpack-plugin": "^1.7.0",
"karma": "^0.13.15",
"karma-junit-reporter": "^0.3.8",
"karma-mocha": "^0.2.1",
"karma-phantomjs2-launcher": "^0.3.2",
"karma-sourcemap-loader": "^0.3.6",
"karma-spec-reporter": "0.0.23",
"karma-webpack": "^1.7.0",
"latinize": "^0.2.0",
"lodash": "^4.17.10",
"mocha": "^2.3.4",
"phantomjs2": "^2.0.2",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-transform-hmr": "^1.0.1",
"rimraf": "^2.4.4",
"standard": "^5.4.1",
"style-loader": "^0.13.0",
"watch": "^0.16.0",
"webpack": "^1.12.9",
"webpack-dev-server": "^1.14.0",
"worker-loader": "^0.7.0"
},
"dependencies": {
"highlight-words-core": "^1.2.0",
"memoize-one": "^4.0.0",
"prop-types": "^15.5.8"
},
"peerDependencies": {
"react": "^0.14.0 || ^15.0.0 || ^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0"
}
}
react-highlight-words-0.20.0/src/ 0000775 0000000 0000000 00000000000 14363331727 0016570 5 ustar 00root root 0000000 0000000 react-highlight-words-0.20.0/src/Highlighter.example.css 0000664 0000000 0000000 00000001134 14363331727 0023171 0 ustar 00root root 0000000 0000000 .Header {
margin: 0 0 .5rem;
font-size: 1.25em;
font-weight: normal;
}
.Input {
width: 100%;
border: 1px solid #78909c;
line-height: 1.4;
padding: .3em .5em;
border-radius: .3em;
margin-bottom: 1em;
font-size: 1em;
}
.Highlight {
background-color: #ffd54f;
}
.Active {
background-color: #f48f42;
}
.Footer {
margin-bottom: 0;
}
.Row {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
}
.FirstColumn,
.SecondColumn {
flex: 1 1 auto;
}
.FirstColumn {
margin-right: 0.5rem;
}
.SecondColumn {
margin-left: 0.5rem;
}
react-highlight-words-0.20.0/src/Highlighter.example.js 0000664 0000000 0000000 00000006301 14363331727 0023016 0 ustar 00root root 0000000 0000000 import latinize from 'latinize'
import React, { Component } from 'react'
import Highlighter from './Highlighter'
import styles from './Highlighter.example.css'
export default class HighlighterExample extends Component {
constructor (props) {
super(props)
this.state = {
searchText: 'and or the',
textToHighlight: `When in the Course of human events it becomes necessary for one people to dissolve the political bands which have connected them with another and to assume among the powers of the earth, the separate and equal station to which the Laws of Nature and of Nature's God entitle them, a decent respect to the opinions of mankind requires that they should declare the causes which impel them to the separation.`,
activeIndex: -1,
caseSensitive: false
}
}
render () {
const { ...props } = this.props
const { activeIndex, caseSensitive, searchText, textToHighlight } = this.state
const searchWords = searchText.split(/\s/).filter(word => word)
return (