README
react-sn-question
Installation
npm run install react-sn-question --save
Usage
import React from 'react';
import SNQuestion from 'react-sn-question';
import 'react-sn-question/dist/main.css';
import questions from './questions'
class App extends React.Component {
state = {
questions: questions
}
render() {
const isQuestionCorrect = SNQuestion.isQuestionCorrect(this.state.questions)
return (
<SNQuestion
title={"An animal cell contains:"}
resolutionMessage={`The selected value is ${isQuestionCorrect ? 'correct': 'incorrect'}`}
onChange={(value) => checkNewValue(value)}
disable={isQuestionCorrect}
questions={this.state.questions}
/>
)
}
}
Live demo
API
Prop | Type | Required | Default | Description |
---|---|---|---|---|
title |
string | Yes | The title of the question. | |
resolutionMessage |
string | Yes | Message to be displayed at the bottom of the container which represents the status of the question. | |
questions |
Array | Yes | Contains the questions data. | |
onChange |
function | No | undefined | Fires whenever a button is toggled. |
disable |
boolean | No | false | Disables the SNQuestion. |
interface SNQuestion {
title: string,
resolutionMessage: string,
questions: Array<Question>
onChange?: (value: string, answerIndex: number, questionIndex: number) => void,
disable?: bool,
}
interface Question {
id: string,
correct: number,
selected: number,
options: Array<Option>,
}
interface Option {
name: string,
value: string
}
Related
Contributing
All contributions are welcome.
License
MIT license @Alvaro Bernal G.