A simple, responsive, and customizable flashcard component library for React, inspired by Quizlet. Create interactive single flashcards or decks with smooth animations and TypeScript support.

react-quizlet-flashcard	Quizlet's flashcard component

• Single Flashcard: Use the Flashcard component for individual cards with flip animations.
• Flashcard Deck: Use the FlashcardArray component to navigate through multiple cards with progress tracking.
• Customizable: Style cards with CSS properties, support for JSX/HTML content, and configurable flip directions.
• TypeScript Support: Fully typed for type-safe development.
• Responsive Design: Adapts to various screen sizes with customizable styles.
• Accessibility: Includes ARIA attributes for screen reader compatibility.

Explore the full documentation and live demos at react-quizlet-flashcard website.

npm install react-quizlet-flashcard

or

yarn add react-quizlet-flashcard

import { FlashcardArray } from "react-quizlet-flashcard";
import "react-quizlet-flashcard/dist/index.css";

const deck = [
  {
    id: 1,
    front: { html: <div>What is the capital of Alaska?</div> },
    back: { html: <div>Juneau</div> },
  },
  {
    id: 2,
    front: { html: <div>What is the capital of California?</div> },
    back: { html: <div>Sacramento</div> },
  },
];

function App() {
  return <FlashcardArray deck={deck} />;
}

import { Flashcard } from "react-quizlet-flashcard";
import "react-quizlet-flashcard/dist/index.css";

function App() {
  return (
    <Flashcard
      front={{ html: <h1>Front</h1> }}
      back={{ html: <h1>Back</h1> }}
    />
  );
}

Visit https://flashcard.abs.moe for detailed documentation, including:

• Props for Flashcard and FlashcardArray components.
• Usage of useFlashcard and useFlashcardArray hooks.
• Customization options and accessibility features.

Contributions are welcome! Check out the issues page on GitHub to report bugs or suggest features. Give us a ⭐️ if you find this project helpful!

This project is licensed under the MIT License.

Take a look at the Contribution Guide for detailed instructions on how to contribute to the project, including setting up the development environment, making changes, and testing your contributions.

• Flashcard array needs a new feature to delete and add cards dynamically. That should also update the cardsInDisplay state and current card index.
• When cycle is enabled after the array was initialized, at the start of the flashcard array (1/7), it breaks.
• Write the component with typescript.
• Write Unit tests.
• More finer control.
• Write the styles with Sass