pax_global_header00006660000000000000000000000064143633317270014523gustar00rootroot0000000000000052 comment=b35d3f0b7d4ff9fe2ee03dbcdece917819d83dd0 react-highlight-words-0.20.0/000077500000000000000000000000001436333172700160015ustar00rootroot00000000000000react-highlight-words-0.20.0/.babelrc000066400000000000000000000004751436333172700174020ustar00rootroot00000000000000{ "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/.gitignore000066400000000000000000000002561436333172700177740ustar00rootroot00000000000000# 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/.npmignore000066400000000000000000000000771436333172700200040ustar00rootroot00000000000000website node_modules karma.conf.js src webpack* .idea .babelrc react-highlight-words-0.20.0/LICENSE000066400000000000000000000020711436333172700170060ustar00rootroot00000000000000The 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.md000066400000000000000000000100101436333172700172500ustar00rootroot00000000000000 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: screen shot 2015-12-19 at 8 23 43 am ## 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.yml000066400000000000000000000001301436333172700177570ustar00rootroot00000000000000general: branches: ignore: - gh-pages machine: node: version: v5.1.0 react-highlight-words-0.20.0/karma.conf.js000066400000000000000000000012201436333172700203510ustar00rootroot00000000000000module.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.json000066400000000000000000000060111436333172700202650ustar00rootroot00000000000000{ "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/000077500000000000000000000000001436333172700165705ustar00rootroot00000000000000react-highlight-words-0.20.0/src/Highlighter.example.css000066400000000000000000000011341436333172700231710ustar00rootroot00000000000000.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.js000066400000000000000000000063011436333172700230160ustar00rootroot00000000000000import 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 (

Search terms

this.setState({ searchText: event.target.value })} />

Active Index

this.setState({ activeIndex: parseInt(event.target.value, 10) })} type='number' />

Case Sensitive?

this.setState({ caseSensitive: event.target.checked })} type='checkbox' />

Body of Text