https://github.com/aishwaryvishwakarma/react-text-glitch
This is a npm package which can be added to React projects. Check Readme for more information ❤
https://github.com/aishwaryvishwakarma/react-text-glitch
npm-packages react text-effects
Last synced: 5 months ago
JSON representation
This is a npm package which can be added to React projects. Check Readme for more information ❤
- Host: GitHub
- URL: https://github.com/aishwaryvishwakarma/react-text-glitch
- Owner: AishwaryVishwakarma
- License: mit
- Created: 2023-06-02T09:10:59.000Z (about 2 years ago)
- Default Branch: master
- Last Pushed: 2024-04-22T23:14:33.000Z (about 1 year ago)
- Last Synced: 2024-12-30T03:46:06.705Z (6 months ago)
- Topics: npm-packages, react, text-effects
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-text-glitch-effect-z64rlc?file=/src/App.js
- Size: 29.3 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-text-glitch-effect
## Install
```bash
npm install react-text-glitch-effect
```
## Usage
```jsx
import React from 'react';
import {TextGlitchEffect} from 'react-text-glitch-effect';
function App() {
return (
);
}
export default App;
```
## Note
Try to use monospace fonts in case of alphabets or alphanumeric type, as the letters having different width may not look good.
## Demo
[Click here for demo](https://codesandbox.io/s/react-text-glitch-effect-z64rlc?file=/src/styles.css)
## Properties
| Property | Type | Default | Description |
| :--------- | :------------------------------------------------------- | :---------- | :---------------------------------------------------------------------- |
| text | String | | The text which will have the glitch effect. |
| speed | Number | `30` | The speed at which the letters change (in ms) |
| letterCase | `lowercase` or `uppercase` | `uppercase` | The letter case which can be used. |
| className | String | | Text styles. |
| type | `alphabets`, `numbers`, `specialchars` or `alphanumeric` | `alphabets` | The type can be used to set which letters to show when the effects run. |