ozuit/react-flashcard

This is a small package to help you fast integrate a Flashcard component to your project.

react-flashcard

Flashcard React Component

Install

npm install --save react-flashcard

Demo

You can view a demo for this package on both desktop and mobile environments.

Click here to view demo!

Usage

import React, { Component } from 'react'

import { FlashcardComponent } from 'react-flashcard'

const cardData = [
  {
    front: {
      text: "living outside, often in a tent",
      image: "https://o.quizlet.com/RWRdgDus.uuqNDUrJ0ernA.jpg",
    },
    back: {
      text: "Camping",
    }
  }
]

class Example extends Component {
  render() {
    return <FlashcardComponent dataSource={cardData} />
  }
}

Properties

Props	Type	Description	Default
dataSource	array	The field is required. This includes text and image for the card content.	[ ]
flipDirection	string	Direction of the card flip ('horizontal' or 'vertical' )	horizontal
onChange	func	This event is triggered by whenever change side (front/back) or navigation (prev/next)	(step, size) => {}
onFinish	func	This event is triggered when the user completes all question and click on the "Finish" button.	() => {}
onSound	func	This event is triggered when the user clicks on the sound icon.	(text) => {}

License

MIT © ozuit