Simple quizlet like flashcard
npm install react-quizlet-flashcardA 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.
``bash`
npm install react-quizlet-flashcard
or
`bash`
yarn add react-quizlet-flashcard
`tsx
import { FlashcardArray } from "react-quizlet-flashcard";
import "react-quizlet-flashcard/dist/index.css";
const deck = [
{
id: 1,
front: { html:
function App() {
return
}
`
`tsx
import { Flashcard } from "react-quizlet-flashcard";
import "react-quizlet-flashcard/dist/index.css";
function App() {
return (
Documentation
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.Contributing
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!
License
This project is licensed under the MIT License.
Contribution Guide
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.
TODO
- [ ] Flashcard array needs a new feature to delete and add cards dynamically. That should also update the
cardsInDisplay` state and current card index.