Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tommyriquet/react-svg-reveal
lightweight and customizable React component to smoothly animate text reveals through SVG animations.
https://github.com/tommyriquet/react-svg-reveal
animation framer-motion react svg ui
Last synced: about 1 month ago
JSON representation
lightweight and customizable React component to smoothly animate text reveals through SVG animations.
- Host: GitHub
- URL: https://github.com/tommyriquet/react-svg-reveal
- Owner: TommyRiquet
- License: mit
- Created: 2023-07-29T10:02:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-29T14:43:21.000Z (over 1 year ago)
- Last Synced: 2024-10-13T23:54:39.758Z (about 1 month ago)
- Topics: animation, framer-motion, react, svg, ui
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-svg-reveal
- Size: 1.62 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React SVG Reveal Animation
## Description
React SVG Reveal is a lightweight and customizable React component that allows you to create SVG reveal animations. With this component, you can gradually reveal text in a visually appealing way, adding an element of suspense and elegance to your web projects.
## Features
- Smooth and elegant text reveal animations.
- Customizable animation duration, delay, and easing options.
- Control over the reveal direction (left to right, right to left, top to bottom, or bottom to top).
- Support for various text styles, including font size, color, and weight.
- Easy integration with React projects and minimal setup required.
## Installation
- First, make sure you have Node.js and npm installed on your machine.
- Clone this repository to your local machine or install it as a dependency in your existing React project using npm or yarn.
## Clone Repository (if starting a new project)
```bash
git clone https://github.com/TommyRiquet/react-svg-reveal.git
cd react-svg-reveal
```
## Install as Dependency (if using in an existing project)
```bash
npm install react-svg-reveal --save
# or
yarn add react-svg-reveal
```
## Usage
- Import the SVGReveal component in your React application.
```jsx
import React from 'react';
import SVGReveal from 'react-svg-reveal';
```
- Use the SVGReveal component in your code and provide the text you want to reveal.
```jsx
function App() {
return (
);
}
```
- Customize the reveal animation by passing additional props.
```jsx
function App() {
return (
);
}
```
## Props
The following props are available for customizing the SVGReveal component:
|Prop|Type|Default|Description|
|:---:|:---:|:---:|:---:|
|path|Array of strings |(required)|svg path representing the text to be revealed.|
|viewBox|string|(required)|svg viewBox representing the size of the text to be revealed.|
|height|number|(required)|height of the svg element.|
|width|number|(required)|width of the svg element.|
|backgroundColor|string|transparent|background color of the svg element.|
|stroke|string|black|stroke color of the svg element.|
|strokeWidth|number|20|stroke width of the svg element.|
|strokeLinecap|string|round|stroke
## Examples
For more usage examples and ideas, check out the 'examples' folder in this repository.
## Contributing
Contributions to this project are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
## License
This project is licensed under the MIT License - see the LICENSE.md file for details.