https://github.com/nitin42/react-marker
🖍️ Highlight keywords and add colors to your text.
https://github.com/nitin42/react-marker
colors crayons highlight markdown react
Last synced: 3 months ago
JSON representation
🖍️ Highlight keywords and add colors to your text.
- Host: GitHub
- URL: https://github.com/nitin42/react-marker
- Owner: nitin42
- Created: 2018-02-15T09:00:17.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-19T07:17:22.000Z (over 7 years ago)
- Last Synced: 2025-03-17T23:03:00.177Z (3 months ago)
- Topics: colors, crayons, highlight, markdown, react
- Language: JavaScript
- Size: 52.7 KB
- Stars: 47
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-marker
> 🖍️ Highlight keywords and add colors to your text
## Install
```
npm install react-marker
```
This package also depends on React, so make sure you've already installed it.
## Demo
## Usage
**Highlighting keywords**
To highlight keywords automatically in your text, use `Keywords` component. Here is an example -
```js
import React from 'react'
import ReactDOM from 'react-dom'
import {Keywords} from 'react-marker'
const TEXT = `
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
`
class App extends React.Component {
render() {
return (
)
}
}
ReactDOM.render(, document.getElementById('container'))
```
This then renders to -
**Highlight the text with different colors**
> This was inspired by [Titus Wormer's](http://wooorm.com) work
```js
import React from 'react'
import ReactDOM from 'react-dom'
import {Highlight} from 'react-marker'
const TEXT = `
Build encapsulated components that manage their own state, then compose them to make complex UIs.
Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
`
class App extends React.Component {
render() {
return (
)
}
}
ReactDOM.render(, document.getElementById('container'))
```
This renders to -
Another example -
## API
`react-marker` exposes only two components, `Highlight` and `Keywords`.
### Components
* #### Keywords
Highlight keywords in your text.
| Props | Default value | Description |
| ------------- |:-------------:| -----:|
| `text` | "" | Text paragraph |
| `maxKeywords` | 5 | Max. no of keywords to highlight |
| `color` | `hsl(60, 91%, 83%)` | Color used to highlight the keywords |
* #### Highlight
Highlight your text with different hue range.
| Props | Default value | Description |
| ------------- |:-------------:| -----:|
| `text` | "" | Text paragraph |
## TODO
- [ ] Gatsby plugin
## License
MIT