Giter VIP home page Giter VIP logo

react-quizlet-flashcard's Introduction

Welcome to react-quizlet-flashcard ๐Ÿ‘‹

Version

A simple and responsive quizlet-like flashcard component with a few additional options.

Front and back card accepts child components as well as html strings!

react-quizlet-flashcard Quizlet's flashcard component

Installation

yarn add react-quizlet-flashcard
npm i react-quizlet-flashcard

Usage

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [
    {
      id: 1,
      front: "What is the capital of <u>Alaska</u>?",
      back: "Juneau",
      frontChild: <div>Hello there</div>
      backChild: <p>This is a back child</p>
    },
    {
      id: 2,
      front: "What is the capital of California?",
      back: "Sacramento",
    },
    {
      id: 3,
      front: "What is the capital of New York?",
      back: "Albany",
    },
    {
      id: 4,
      front: "What is the capital of Florida?",
      back: "Tallahassee",
    },
    {
      id: 5,
      front: "What is the capital of Texas?",
      back: "Austin",
    },
    {
      id: 6,
      front: "What is the capital of New Mexico?",
      back: "Santa Fe",
    },
    {
      id: 7,
      front: "What is the capital of Arizona?",
      back: "Phoenix",
    },
  ];
  return (
    <div>
      <FlashcardArray cards={cards} />
    </div>
  );
}

Available Props

Prop Description Type
cards (Required) Array of objects with keys id, front, back array
controls (Optional) used to set whether the arrows should be shown or not bool
count (Optional) used to set whether the the card count is shown or not bool
onCardChange (Optional) callback function called on every card change func
forwardRef (Optional) when passed with a ref, ref.current object will contain reference to nextCard() and prevCard() Obj
FlashCardStyle (Optional) Object with style attributes for each card Obj
FlashCardClassName (Optional) Optional class name for each card String
FlashCardWrapperStyle (Optional) Styles obj for cards container(Don't override this unless you really have to) Obj
setCurrentCard (Optional) Callback function that returns the current card's data. In addition to the data you passed, it will return index of the card, isFlipped func
setCurrentCardIndex (Optional) Callback function that returns the current card's index in input array (Preferably a useState setter function) func
setIsFlipped (Optional) Called every time current card flipped. Returns true if the card is currently flipped func

Various examples

Cards without Controls and card count:

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
    const cards = [...]
  return (
    <div>
      <FlashcardArray cards={cards} count={false} control={false} />
    </div>
  );
}

Card change callback:

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [...]
  return (
    <div>
      <FlashcardArray
        cards={cards}
        onCardChange={(cardNumber)=>{
            // called on each card change event
            console.log(cardNumber)
        }}
      />
    </div>
  );
}

Cards with custom controls(Using forwardRef prop):

import { FlashcardArray } from "react-quizlet-flashcard";
import { useRef } from "react";


function App() {
  const arrayRef = useRef({});
  const cards = [...]
  return (
    <div>
      <FlashcardArray
        cards={cards}
        count={false}
        forwardRef={arrayRef}
        control={false}
      />
       // Here, arrayRef is only mapped to this instance so
       // any number of <FlashcardArray /> can be used in the
       // same page with different refs
      <button onClick={() => arrayRef.current.prevCard()}>Prev</button>
      <button onClick={() => arrayRef.current.nextCard()}>Next</button>
    </div>
  );
}

Get current Card index:

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [...];
  return (
    <div>
      <div>
        <FlashcardArray
          cards={deck.cards}
          // Called everytime the card is changed. 
          // You can use useState to store the current card index.
          setCurrentCardIndex={(index) => {
            console.log(index);
          }}
        />
      </div>
    </div>
  );
}

Updated current card data:

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [...];
  return (
    <div>
      <div>
        <FlashcardArray
          cards={deck.cards}
          // Callback function invoked every time the card is changed or
          // card is flipped. 
          setCurrentCard={(currentCard) => {
            console.log(currentCard);
          }}
        />
      </div>
    </div>
  );
}	

// Output:
{
    "id": 1,
    "front": "What is the <u>capital</u> of Alaska?",
    "back": "Juneau",
    "options": [...],
    "frontChild": "Hello there",
    "backChild": "THis is back child hehe",
    "index": 0,
    "flipped": true
}

On card flip:

import { FlashcardArray } from "react-quizlet-flashcard";

function App() {
  const cards = [];
  return (
    <div>
      <div>
        <FlashcardArray
          cards={deck.cards}
          // Every time the current card is flipped, this method is invoked
          // with true if card is flipped(Showing its back) or 
          // with false if the card is not flipped(Showing the front)
          setIsFlipped={(isFlip) => {
            console.log(isFlip);
          }}
        />
      </div>
    </div>
  );
}

๐Ÿค Contributing

Contributions, issues and feature requests are welcome! Feel free to check issues page.

Give a โญ๏ธ if this project helped you!

To-Do:

  • Write the component with typescript.
  • Write Unit tests.
  • More finer control.
  • Write the styles with Sass

react-quizlet-flashcard's People

Contributors

absanthosh avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.