react-marker

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

(★ 48)

🖍️ Highlight keywords and add colors to your text.

react-marker 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# react-marker
![size-label](https://img.shields.io/badge/size-13.5%20KB-green.svg)

> 🖍️ &nbsp;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

![demo](http://g.recordit.co/9cuduzjMYr.gif)

## 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 (
 <Keywords
 text={TEXT}
 maxKeywords={8}
 color="mistyrose"
 />
 )
 }
}

ReactDOM.render(<App />, 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 (
 <Highlight text={TEXT} />
 )
 }
}

ReactDOM.render(<App />, 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

react-marker

react-marker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-marker

react-marker 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README