react-questify

Easily creates question forms using react

You can see a working demo of the library here.

Install

yarn add react-questify

or

npm i react-questify

Usage

import React, { Component } from "react";

import ReactQuestify from "react-questify";

class MyComponent extends Component {
  ...

  render() {
    return <ReactQuestify questions={q} />;
  }
}

Questions

Text input

{
    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)
        }
    }
}

Select input

{
    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
        }
    }
}

Options input

{
    name: 'experience',
    text: 'How many years of experience do you have?',
    type: 'options', //options type
    options: ['1', '< 5', '< 10', '> 10'],
    answers: {
        default: {
            goTo: 3
        }
    }
}

Color input

{
    name: 'color',
    text: 'What is your favorite color?',
    type: 'color', //color type
    options: ['red', '#f90', '#555', 'green'],
    answers: {
        default: {
            goTo: 4
        }
    }
}

Url input

{
    name: 'facebook',
    text: "Please, write your facebook page url",
    suggestion: 'https://facebook.com/example',
    type: 'url',
    answers: {
        default: {
            goTo: 5
        }
    }
}

Image input (coming soon)

Skippable questions

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
        }
    }
}

License

MIT © gventuri