react-swervy-text

🙈 Preview

📦 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;

Props

All Components:

Only for Rectangle, Circle, and CustomPath Components:

Only for Rectangle and Circle Components:

Only for Rectangle Component:

Only for Circle Component:

Only for CustomPath Component:

Only for Arc and Snake Components:

Only for Arc Component:

Only for Snake Component:

Built With

• React.js
• Styled-Components
• Framer-Motion