Easily creates question forms using react
You can see a working demo of the library here.
yarn add react-questify
or
npm i react-questify
import React, { Component } from "react";
import ReactQuestify from "react-questify";
class MyComponent extends Component {
...
render() {
return <ReactQuestify questions={q} />;
}
}
{
name: 'name', //the name value, it will be the key of the answers object
text: 'Who are you?', //the question value
suggestion: 'I am your worst nightmare', //the placeholder value, optional
type: 'text', //input text
answers: {
default: { //default value
goTo: 1 //go to the second element of the questions array (arrays start from 0 element)
}
}
}
{
name: 'character',
text: 'What\'s your favorite character?',
options: ['Mickey Mouse', 'Donald Duck', 'Bugs Bunny', 'Duffy Duck'], //the available options
type: 'text', //input text type
answers: {
'Mickey Mouse': { //custom value
goTo: 3 //if the value is 'Mickey Mouse', go to 3 instead of 2 (skip one question)
},
default: {
goTo: 2
}
}
}
{
name: 'experience',
text: 'How many years of experience do you have?',
type: 'options', //options type
options: ['1', '< 5', '< 10', '> 10'],
answers: {
default: {
goTo: 3
}
}
}
{
name: 'color',
text: 'What is your favorite color?',
type: 'color', //color type
options: ['red', '#f90', '#555', 'green'],
answers: {
default: {
goTo: 4
}
}
}
{
name: 'facebook',
text: "Please, write your facebook page url",
suggestion: 'https://facebook.com/example',
type: 'url',
answers: {
default: {
goTo: 5
}
}
}
There are some questions the user might not be able to answer. For those, you can add a "skip" button.
In order to do so, you need to add the skippable: true
attribute, as you can see in the example.
It will show the question provided in the answers.default.goTo
attribute.
{
name: 'name',
text: "Please, enter your name",
suggestion: 'Goose',
type: 'text',
skippable: true
answers: {
default: {
goTo: 5
}
}
}
MIT © gventuri