Meet Calligraphy: Your Typography Soulmate for React & TypeScript

Tired of struggling with Google Fonts integration? Drowning in a sea of inconsistent header styles? Meet Calligraphy, your new secret weapon for beautiful, effortless typography in your React and TypeScript projects.

What is Calligraphy?

In short, Calligraphy is a lightweight React component designed to streamline typography management. Think of it as your one-stop shop for creating stunning headlines, engaging body copy, and everything in between, without getting bogged down in boilerplate code.

Key Features That Make Calligraphy Shine:

• Automatic Google Fonts Support: Say goodbye to manually adding <link> tags to your HTML or wrestling with font loaders. Just pass the Google Font name as a prop, and Calligraphy takes care of the rest, injecting the font seamlessly into your app. This means you can easily experiment with different fonts and find the perfect match for your design.
• 30+ Hero Entrance Animations: Make your headers stand out with over 30 built-in entrance animations! These animations, ranging from smooth fades to dynamic character effects, add a touch of personality and flair to your hero sections and landing pages. They're designed to be lightweight and performant, ensuring a smooth user experience.
• Custom Motion Config: When the presets don't quite hit the mark, Calligraphy empowers you to create your own bespoke animations. With the motionConfig prop, you can define keyframes, durations, easing, delays, and more, giving you granular control over how your typography comes to life.
• Italic Accent Toggle: Add a subtle touch of elegance to your Display and H1 variants with the italic accent toggle. When enabled, any <em> tag within these variants will automatically render with a stylish serif italic font and a customizable accent color. It's a quick and easy way to add visual interest and emphasize key words or phrases.
• TypgraphyProvider for Defaults: Keep your typography consistent across your entire application (or just specific sections) with the TypographyProvider. Set default font styles, accent colors, animations, and more once, and have them automatically apply to all <Typography> components within the provider's scope. This saves you from repeating styles and ensures a cohesive look and feel.
• Nesting Providers: Need different typography styles for different parts of your app? Calligraphy's TypographyProvider supports nesting, allowing you to create hierarchical typography structures that meet the specific needs of each section.

Why Calligraphy?

• Effortless Implementation: Get beautiful typography up and running in minutes. The intuitive props and automatic features make Calligraphy incredibly easy to use, even for those new to React.
• Enhanced User Experience: Engaging animations and consistent typography can significantly improve the look and feel of your application, making it more visually appealing and easier to navigate.
• Streamlined Workflow: Spend less time worrying about typography configuration and more time focusing on building your application's core features.
• Developer-Friendly: Designed with TypeScript in mind, Calligraphy provides excellent type safety and a smooth development experience.

Get Started with Calligraphy:

Ready to elevate your React app's typography? Calligraphy is easy to install via npm or yarn:

npm install @edwinvakayil/calligraphy
# or
yarn add @edwinvakayil/calligraphy

Then, import the Typography component and start building!

import { Typography } from "@edwinvakayil/calligraphy";

export default function App() {
  return (
    <div>
      <Typography variant="Display" font="Bricolage Grotesque" animation="rise">
        Design with <em>intention</em>
      </Typography>

      <Typography variant="H1" font="Syne">
        Page Title
      </Typography>

      <Typography variant="Body" font="DM Sans">
        Regular body copy goes here.
      </Typography>
    </div>
  );
}

Want to learn more? Check out the Calligraphy Documentation for detailed information on all available props, animations, and usage examples.

With Calligraphy, creating visually stunning and engaging typography has never been easier. So why wait? Give Calligraphy a try today and take your React applications to the next level of typographic excellence!