React-marked-html NPM

React Marked Html

Demo

1) clone project 2) install dependencies 3) npm run start

What

React Component for highlighting html

Installation

Using npm:

npm i react-marked-html --save

Using yarn:

yarn add react-marked-html

Properties

Property	Type	Default Value	Required	Description
`html`	html element or string	empty string	false	html string or html element or react children
`rules`	array	[]	false	array of highlight rules
`columnCount`	number	1	false	the number of columns into which the document will be divided
`onlyUniqColor`	boolean	true	false	determines whether more than one of the same color should be shown in a cell
`colorBoxHeight`	number	4	false	defines the height of the color box in pixels
`magnifier`	boolean	false	false	show a magnifying glass? true == show
`magnifierHeight`	number	100	false	magnifier height in pixels
`minBoxHeight`	number	50	false	min height of scroll box
`scrollWidth`	number	55	false	width of scroll box
`children`	any	empty	false	react children
`selector`	string	empty string	false	if rules is empty, it is possible to give a selector (for example .marked-html)
`ignoreColumn`	boolean	false	false	if true - ignore horizontal color boxes position
`statCallback`	func	() => null	false	callback for colors statistics

"rules" property:

array of objects, each object has the following form

backgroundColor - background color for finding element (any color format)
color - text color for finding element (any color format)
words - array of words

Supported Rules:

complete word match

Example:

{
  backgroundColor: "red",
  color: "rgb(0,216,40)",
  words: ["from", "for"],
}

with wildcards (* or ?)

Examples:

{backgroundColor: "rgb(1,255,198)", words: ["lib*", "crea*"]}
{backgroundColor: "yellow", words: ["*chain", "*bility"]}
{backgroundColor: "gray", words: ["*ebpa*", "*commen*"]}
{backgroundColor: "black", words: ["re?ct", "mo?re"]}

Example of Use

<MarkedHtml
    html={<your_html>}
    columnCount={5}
    onlyUniqColor={true}
    colorBoxHeight={4}
    magnifier={true}
    magnifierHeight={100}
    minBoxHeight={100}
    scrollWidth={100}
    rules={[
        {
            backgroundColor: "red",
            color: "rgb(0,216,40)",
            words: ["from", "for"],
        },
        {backgroundColor: "blue", words: ["learning"]},
        {backgroundColor: "rgb(1,255,198)", words: ["lib*", "crea*"]},
        {backgroundColor: "yellow", words: ["*chain", "*bility"]},
        {backgroundColor: "gray", words: ["*ebpa*", "*commen*"]},
        {backgroundColor: "black", words: ["re?ct", "mo?re"]},
    ]}
/>

react react-dom mark.js @babel/core @babel/cli @babel/plugin-syntax-jsx cpx react-scripts

@infinitebrahmanuniverse/nolb-react-ma @everything-registry/sub-chunk-2566

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago