Font Draggable Text

FontDraggableText is a React component that provied you a draggable text elements with various font styles. It leverages Tailwind CSS for styling and Framer Motion for animations. Looks amazing! Must Try once!

Installation

You can install the package via npm:

npm install font-draggable-text

Usage

( Sample Example )

1. Import fonts to the index.css file

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton+SC&family=Edu+AU+VIC+WA+NT+Arrows:[email protected]&family=Jaro:[email protected]&family=Mochiy+Pop+P+One&family=Noto+Sans+Display:ital,wght@0,100..900;1,100..900&family=Noto+Sans+Mono:[email protected]&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Public+Sans:ital,wght@0,100..900;1,100..900&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&family=Yuji+Mai&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

2. Add Fonts to the Tailwind Configuration

you need to add the custom fonts to your tailwind.config.js file. Here is an example configuration:

/** @type {import('tailwindcss').Config} */
export default {
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    extend: {
      fontFamily: {
        pop: "Poppins",
        int: "Inter",
        edu: "Edu AU VIC WA NT Arrows",
        mono: "Noto Sans Mono",
        notoSans: "Noto Sans Display",
        tinos: "Tinos",
        pOne: "Mochiy Pop P One",
        playfair: "Playfair",
        publicSans: "Public Sans",
        anton: "Anton SC",
        yugi: "Yuji Mai",
        jaro: "Jaro",
      },
    },
  },
  plugins: [],
};

3. Pass Fonts Using Array to the Component

Finally, you need to pass the fonts as an array to the FontDraggableText component.

import FontDraggableText from "../../satendra-pkg/src/components/FontDraggableText";

function App() {
  const fonts = [
    "font-pop font-bold italic", // Poppins, bold, and italic
    "font-int font-light", // Inter, light
    "font-mono font-bold", // Noto Sans Mono, bold
    "font-notoSans font-medium", // Noto Sans Display, medium
    "font-tinos font-extrabold", // Tinos, extra-bold
    "font-playfair font-black", // Playfair, black (heaviest weight)
    "font-publicSans font-semibold", // Public Sans, semi-bold
    "font-anton uppercase font-bold", // Anton SC, bold, and uppercase
    "font-yugi font-medium italic", // Yuji Mai, medium, and italic
    "font-jaro font-thin", // Jaro, thin
  ];
  return (
    <div className="flex flex-col text-3xl tracking-tighter leading-[30px] font-bold items-center justify-center">
      <FontDraggableText
        words={["This", "is", "a", "Example", "Text"]}
        fonts={fonts}
      />
    </div>
  );
}

export default App;

Result

Props

| Prop | Type | Description | |------------|-------------------|------------------------------------------------------------------| | words | string[] | An array of strings to be displayed as draggable text (e.g., ["Example"]). | | className| string (optional)| A CSS class to style the component (e.g., "my-class"). | | fonts | string[] (optional) | An array of font names to customize the text font (e.g., ["Arial", "Helvetica"]). |

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

Satendra Kumar Parteti

Contact

Ways to Contact:

1. GitHub Issues: You can open an issue directly on this repository for bugs, feature requests, or general inquiries.

   • Open an Issue

2. Email: Reach out to us via email at:

   • [email protected]

3. Social Media:

   • Instagram: @_satendra_03
   • LinkedIn: Satendra Kumar Parteti

4. Buy Me A Coffee:

   • Small Contibution: