An open API service indexing awesome lists of open source software.

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 ❤

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. |