0.0.5 • Published 5 months ago
matn v0.0.5
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 matnUsage
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