Getting Started

JSX Marker is a versatile React component for styling text based on custom patterns and matchers. With JSX Marker, you can easily apply styling to specific portion of the text within your React applications.

Installation

To install jsx-marker, you will need to have npm, yarn or pnpm installed on your system. Once you have one of these package managers set up, you can install jsx-marker by running the following command:

  npm install --save jsx-marker

  yarn add jsx-marker

  pnpm add jsx-marker

This will install the latest version of jsx-marker and add it as a dependency to your project.

Usage/Examples

import { Marker } from "jsx-marker";

function App() {
  return (
    <>
      {/* Matches 'd' character */}
      <Marker text="abcdef" matchers={{d: <span style={{color:"red"}} />}} />

      {/* Matches portions of the text which starts with 'd' */}
      <Marker text="abcdef" matchers={{"d*": <span style={{color:"red"}} />}} />

      {/* Matches portions of the text which ends with 'd' */}
      <Marker text="abcdef" matchers={{"*d": <span style={{color:"red"}} />}} />

      {/* Matches portions of the text between 'b' and 'f'. */}
      <Marker text="abcdef" matchers={{ "(b,f)": <span style={{ color: "red" }} /> }} />

      {/* Matches portions of the text between 'b' and 'f' including 'b' and 'f' */}
      <Marker text="abcdef" matchers={{ "[b,f]": <span style={{ color: "red" }} /> }} />

      {/* Define custom matchers and link them into matchers object using @ */}
      <Marker text="abcdef" custom={{ middle: /cd/g }} matchers={{ "@middle": <span style={{ color: "red" }} /> }} />

      {/* Matches all of the text */}
      <Marker text="abcdef" matchers={{"*": <span style={{color:"red"}} />}} />

      {/* Also matches all of the text if the text contains the <char> */}
      <Marker text="abcdef" matchers={{"*<char>*": <span style={{color:"red"}} />}} />

    </>
  )
}

Authors

• @alirezahematidev

License

MIT