1.0.3 • Published 8 months ago

react-flashcard v1.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

react-flashcard

Flashcard React Component

NPM JavaScript Style Guide

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

PropsTypeDescriptionDefault
dataSourcearrayThe field is required. This includes text and image for the card content.
flipDirectionstringDirection of the card flip ('horizontal' or 'vertical' )horizontal
onChangefuncThis event is triggered by whenever change side (front/back) or navigation (prev/next)(step, size) => {}
onFinishfuncThis event is triggered when the user completes all question and click on the "Finish" button.() => {}
onSoundfuncThis event is triggered when the user clicks on the sound icon.(text) => {}

License

MIT © ozuit