react-swervy-text

1.0.5 • Public • Published

react-swervy-text

A npm package that provides an easy implementation for text to be animated along shapes and curves

📦 Installation

# with npm 
npm install react-swervy-text
 
# with yarn 
yarn add react-swervy-text

Usage

import React from "react";
import { Arc, Circle, Rectangle, Snake, CustomPath } from "react-swervy-text";
import "./styles.css";
function App() {
  return (
    <div>
      <div style={{ marginTop: "3rem" }}>
        <Arc text={"This is an arc"} fontSize={"5rem"} />
      </div>
 
      <div style={{ marginTop: "9rem", display: "flex", justifyContent: "center" }}>
        <Circle
          delay={2}
          text={"Circle"}
          timingFunction="linear"
          fontSize="3rem"
        />
        <Rectangle
          delay={4}
          text={"Rectangle"}
          x={100}
          fontSize={"3rem"}
          s1={200}
          s2={100}
          direction={"Reverse"}
          timingFunction="quadratic"
        />
      </div>
      <div style={{ marginTop: "12rem" }}>
        <Snake
          delay={6}
          text={"This is the snake component!"}
          fontSize={"5rem"}
        />
      </div>
 
      <div style={{ marginTop: "4rem" }}>
        <CustomPath text={"Curve"} delay={8} />
      </div>
    </div>
  );
}
 
export default App;
 

Edit Button

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

Package Sidebar

Install

npm i react-swervy-text

Weekly Downloads

1

Version

1.0.5

License

MPL-2.0

Unpacked Size

137 kB

Total Files

3

Last publish

Collaborators

  • etesam