React Cursive Handwrite

A React component that animates text in a cursive handwriting style using SVG paths. Perfect for creating elegant, animated text effects in your React applications.

Features

• 🖋️ Smooth cursive handwriting animation
• 🎨 Customizable stroke color and width
• ⚡ Adjustable animation duration
• 📏 Responsive sizing
• 🎯 Multiple text wrapping options
• 🔄 Replay animation capability
• 🎭 Custom SVG path support

Installation

npm install react-cursive-handwrite
# or
yarn add react-cursive-handwrite

Setup

Before using the component, you need to set up the font files. The component expects SVG files for each letter in a specific directory structure:

public/
  fonts/
    google/  # or any other font name you specify
      a.svg
      b.svg
      c.svg
      # ... and so on for each letter

Usage

Basic Usage

import { HandwritingText } from 'react-cursive-handwrite';

function App() {
  return (
    <HandwritingText fontPath="fonts/google">
      Hello World
    </HandwritingText>
  );
}

Advanced Usage

import { HandwritingText } from 'react-cursive-handwrite';

function App() {
  return (
    <HandwritingText 
      fontPath="fonts/google"
      strokeColor="#FF0000"
      strokeWidth={3}
      duration={5}
      width={500}
      height={100}
      replay={true}
      replayDelay={2000}
    >
      Hello World
    </HandwritingText>
  );
}

Using Custom SVG Path

import { HandwritingText } from 'react-cursive-handwrite';

function App() {
  return (
    <HandwritingText 
      path="M 0,0 L 100,100..." // Your custom SVG path
      strokeColor="#FF0000"
      strokeWidth={3}
      duration={5}
    >
      Hello World
    </HandwritingText>
  );
}

Using SVG File

import { HandwritingText } from 'react-cursive-handwrite';

function App() {
  return (
    <HandwritingText 
      svgFile="/path/to/your/cursive.svg"
      strokeColor="#0000FF"
    >
      Hello World
    </HandwritingText>
  );
}

As a Heading

import { HandwritingText } from 'react-cursive-handwrite';

function App() {
  return (
    <HandwritingText 
      fontPath="fonts/google"
      as="h1"
      strokeColor="#00FF00"
      strokeWidth={2}
    >
      Welcome to My Site
    </HandwritingText>
  );
}

Props

Prop	Type	Default	Description
children	React.ReactNode	Required	The text to be displayed
fontPath	string	"google"	Path to the directory containing letter SVG files
path	string	-	SVG path data for the text (overrides fontPath)
svgFile	string	-	Path to an SVG file containing the path data
strokeColor	string	"#000"	Color of the stroke
strokeWidth	number	2	Width of the stroke
duration	number	3	Duration of the animation in seconds
width	number | string	"100%"	Width of the SVG viewport
height	number | string	"100%"	Height of the SVG viewport
strokeDashArray	number	2000	Initial stroke dash array value
as	ElementType	"div"	HTML element type to wrap the text
replay	boolean	false	Whether to replay the animation
replayDelay	number	2000	Delay in milliseconds before replaying the animation

Creating Custom SVG Paths

You can create custom SVG paths for your text using various tools:

1. FontForge: Convert fonts to SVG paths
2. Adobe Illustrator: Create and export SVG paths
3. Online SVG Path Generators: Convert text to SVG paths

Example SVG File Structure

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M 20,80 C 20,80 40,20 60,20 S 80,20 80,80 S 60,140 40,140 S 20,140 20,80"/>
</svg>

Best Practices

1. Performance: For optimal performance, keep the SVG path data as simple as possible
2. Responsiveness: Use percentage-based widths and heights for responsive designs
3. Animation: Adjust the duration based on the length of the text
4. Replay: Use the replay feature sparingly to avoid overwhelming users
5. Font Files: Ensure your font SVG files are properly named (lowercase letters) and placed in the correct directory structure

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

MIT

Support

If you find this package useful, please consider giving it a ⭐️ on GitHub!