Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/etesam913/react-swervy-text
:loop: A react package that provides an easy way for text to be animated along shapes and curves.
https://github.com/etesam913/react-swervy-text
Last synced: about 1 month ago
JSON representation
:loop: A react package that provides an easy way for text to be animated along shapes and curves.
- Host: GitHub
- URL: https://github.com/etesam913/react-swervy-text
- Owner: Etesam913
- License: mpl-2.0
- Created: 2020-03-26T06:02:11.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-05T17:48:48.000Z (almost 2 years ago)
- Last Synced: 2024-09-23T23:04:15.069Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/react-swervy-text
- Size: 1.56 MB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
react-swervy-text :curly_loop:
A npm package that provides an easy implementation for text to be animated along shapes and curves
## :see_no_evil: Preview
## 📦 Installation
```bash
# with npm
npm install react-swervy-text
# with yarn
yarn add react-swervy-text
```
## :mag: Usage
```jsx
import React from "react";
import { Arc, Circle, Rectangle, Snake, CustomPath } from "react-swervy-text";
import "./styles.css";
function App() {
return (
);
}
export default App;
```
[](https://codesandbox.io/s/react-swervy-text-demo-0qk9s)
### Props
#### All Components:
*
fontSize sets the font size of the component, ex. "5rem", "2px"
*
delay accepts a number for how long in seconds to wait for the animatiion to begin.
*
text accepts a string for the text that the component should show.
*
delayConst accepts a number for the amount of time to pass before a letter is shown.
*
colors accepts an array of hex color strings. Each element is the color that will be applied to the respective letter. If the length of the array is less than the number of characters, the colors will be repeated. If no color is given, then random colors will be generated for each letter.
#### Only for Rectangle, Circle, and CustomPath Components:
*
loop accepts a string or number for the number of cycles to run. ex. 2, 5, "infinite"
*
period accepts a number for how long one cycle of the animation should last.
*
playState accepts a string of either "running" or "paused".
*
distance accepts a string that represents what percent of the loop is to be finished. ex. "50%".
*
timingFunction accepts a string that represents what function to run for the animation. ex. "linear", "quadratic", "cubic", "cubic-bezier(.65, .05, .36, 1)".
*
direction accepts a string that represents the direction for the animation. ex. "normal", "reverse", "alternate", "alternate-reverse".
#### Only for Rectangle and Circle Components:
*
x accepts a number for how many px to the right for the animation to begin.
*
y accepts a number for how many px down for the animation to begin.
#### Only for Rectangle Component:
*
s1 accepts a number for how long the first side should be.
*
s2 accepts a number for how long the second side should be.
#### Only for Circle Component:
*
r accepts a number for how big the radius of the circle should be.
#### Only for CustomPath Component:
*
Path accepts a string for the path. ex. "M1 46C74.6667 12.3333 247.2 -34.8 348 46C448.8 126.8 640.667 79.6667 724 46"
#### Only for Arc and Snake Components:
*
heightIncrement accepts a number for the difference in height between two consecutive letters.
#### Only for Arc Component:
*
rotate accepts a boolean for if the letters should be rotated.
*
startingRot accepts a number (in degrees) what the rotation should be on the first letter.
#### Only for Snake Component:
*
lenOfEachIncrement accepts an int number for the number of characters in each upwards and downwards section of the snake.
## Built With
* React.js
* Styled-Components
* Framer-Motion