https://github.com/binary-blazer/react-effectz
💠react effects npm package including some effects in form as components
https://github.com/binary-blazer/react-effectz
cjs effectz esm library nextjs react react-effectz types typescript
Last synced: 18 days ago
JSON representation
💠react effects npm package including some effects in form as components
- Host: GitHub
- URL: https://github.com/binary-blazer/react-effectz
- Owner: binary-blazer
- License: apache-2.0
- Created: 2024-04-09T19:21:07.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-16T21:27:22.000Z (4 months ago)
- Last Synced: 2025-04-24T14:01:47.482Z (21 days ago)
- Topics: cjs, effectz, esm, library, nextjs, react, react-effectz, types, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-effectz
- Size: 248 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-effectz
> 💠react effects npm package including some effects in form as components
## 📋 Requirements
- React 18.2.0 or later
- Node.js 18.0.0 or later
- (for Next.js) Next.js 13.0.0 or later
## 📦 Installation
```bash
npm install react-effectz
# or
yarn add react-effectz
# or
pnpm add react-effectz
# or
bun add react-effectz
```
## 📚 Usage
```jsx
import { GlitchText, FadeInText, BounceText } from "react-effectz";
const App = () => {
return (
<>
>
);
};
```
## 📖 Documentation
- [GlitchText](#glitchtext)
- [FadeInText](#fadeintext)
- [BounceText](#bouncetext)
> Rest will be available soon
### GlitchText
```jsx
import { GlitchText } from "react-effectz";
const App = () => {
return (
);
};
```
#### Props
- `text` (string): Text to apply glitch effect on
- `className` (string): Classname to apply on the text
- `playOnLoop` (boolean): Play the glitch effect on loop
- `duration` (number): Duration of the glitch effect <(soon)>
### FadeInText
```jsx
import { FadeInText } from "react-effectz";
const App = () => {
return (
);
};
```
#### Props
- `text` (string): Text to apply fade-in effect on
- `className` (string): Classname to apply on the text
- `playOnLoop` (boolean): Play the fade-in effect on loop
- `style` (object): Inline styles to apply to the text
### BounceText
```jsx
import { BounceText } from "react-effectz";
const App = () => {
return (
);
};
```
#### Props
- `text` (string): Text to apply bounce effect on
- `className` (string): Classname to apply on the text
- `playOnLoop` (boolean): Play the bounce effect on loop
- `style` (object): Inline styles to apply to the text
## 📚 Examples
You can find examples on how to use the (currently only GlitchText) in the [examples](./examples)
## 📜 License
Apache-2.0 License © [Jonas Franke <@binary-blazer>](https://github.com/binary-blazer/react-effectz/blob/main/LICENSE)