Matn Component

Matn component provides advanced text rendering with features such as number formatting, animations, highlights, gradients, and more.

Installation

npm install matn
# or
yarn add matn

Usage

import Matn from "matn";

function App() {
  return (
    <Matn
      highlight={["React"]}
      highlightColor="yellow"
      formatNumber
      animateNumber
      duration={1500}
      font="bold"
      color="blue"
      copyable
    >
      1234567
    </Matn>
  );
}

Props

| Prop | Type | Default | Description | | ---------------- | -------------------------------- | ---------- | ----------------------------------- | | children | string \| number | - | The text or number to display. | | highlight | string[] | [] | Words to highlight. | | highlightColor | string | yellow | Highlight color. | | formatNumber | boolean | false | Format numbers with separators. | | separator | ' ' \| ',' \| '.' \| 'auto' | ' ' | Number separator. | | animateNumber | boolean | false | Animate number counting. | | duration | number | 1000 | Animation duration (ms). | | font | 'normal' \| 'italic' \| 'bold' | 'normal' | Font style. | | color | string | - | Text color. | | lineCount | number | - | Limits the number of lines. | | copyable | boolean | false | Enables copying text. | | mask | boolean \| RegExp | false | Masks text partially or with regex. | | html | boolean | false | Renders text as HTML. | | tooltip | string | - | Tooltip text. | | letterSpacing | number | - | Adjust letter spacing. | | gradient | string | - | Gradient text effect. | | marquee | boolean | false | Enables marquee scrolling. | | responsiveFont | boolean | false | Enables responsive font size. | | typewriter | boolean | false | Simulates typewriter effect. | | autoLink | boolean | false | Auto-links URLs in text. |

License

MIT