react-flashcard-app

FlashcardApp

Node package for a flashcard application implemented as a react component.

Screenhot

Examples

To build the example locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

Installation

The easiest way to use react-flashcard-app is to install it from NPM and include it in your own React build process (using Browserify, Webpack, etc).

You can also use the standalone build by including dist/react-flashcard-app.js in your page. If you use this, make sure you have already included React, and it is available as a global variable.

npm install react-flashcard-app --save

Usage

Basic Usage

Example:

import FlashcardApp from 'react-flashcard-app';

  {
    id: 1,
    name: 'Example Deck',
    cards: [
      {
        id: 1,
        front: 'Lorem',
        back: 'dolor',
      },
      {
        id: 2,
        front: 'sit',
        back: 'amet',
      },
      {
        id: 3,
        front: 'consetetur',
        back: 'sadipscing',
      },
      {
        id: 4,
        front: 'sed',
        back: 'diam',
      },
    ],
  };

<FlashcardApp data={data} />

Usage with Options

There are three main option keys available:

• topControlBar

  Array of button keys. Sets which buttons will apear at which position in the top control bar

• bottomControlBar

  Array of button keys. Sets which buttons will apear at which position in the bottom control bar

• buttonTexts

  Object of button keys and string values. Overrides the default button texts.

Available button keys and the ascotiated function of the button are:

• up_rating

  move current card one tab to the right

• down_rating

  move current card one tab to the left

• decrement

  load previous card

• increment

  load next card

• flip

  turn top card over

• shuffle

  randomly change order of cards

• reset

  put app back into initial state

• revert

  turn all cards around to show back first

Example:

import FlashcardApp from 'react-flashcard-app';

const options =
  {
    topControlBar: [ 'downRating', 'decrement', 'increment', 'upRating',
    ],
    bottomControlBar: [
      'flip', 'shuffle', 'reset', 'revert',
    ],
    buttonTexts: {
      shuffle: 'custom text here',
    },
  };
    
const data = [
  {
    id: 1,
    name: 'Example Deck',
    cards:
    [
      'Lorem', 'dolor',
      'sit', 'amet',
      'consetetur', 'sadipscing',
      'sed', 'diam',
    ]
  }
];

<FlashcardApp data={data} options={options} />

Development (src, lib and the build process)

NOTE: The source code for the component is in src. A transpiled CommonJS version (generated with Babel) is available in lib for use with node.js, browserify and webpack. A UMD bundle is also built to dist, which can be included without the need for any build system.

To build, watch and serve the examples (which will also watch the component source), run npm start. If you just want to watch changes to src and rebuild lib, run npm run watch (this is useful if you are working with npm link).

License

CCBY