The perfect package for any kind of survey, questions card etc. It will wrap your components with a nicely animated transition and gives you the possibility to customize your content freely.
npm i react-questions
import Questions from 'react-questions'
import Questions from 'react-questions'
...
const finish = () => {
/* called when finished */
}
const questions = [
{id: 1, question: "What's your name?"},
{id: 2, question: "How old are you?"},
]
return (
<Questions questions={questions} animation="blur-fade">
{(submit, currentQuestion) => (
<div className="your-custom-component" onClick={submit}>
<button onClick={submit}>Submit</button>
</div>
)}
</Questions>
)
### Note:
Currently the `Questions`-component is not collecting the answers for you. THe idea is that you collect it by yourself with hook into the submit function and collect your answers by yourself.
questions: any[];
onFinish: () => void;
children: (nextCard: any, currentIndex: number) => ReactElement;
animation?: "blur-fade" | "grow-fade";
A list of your questions. The shape of the elements is up to you. It just needs to be at least one element. The object will be passed to the render function as currentQuestion
This function will be called when the set of questions is done.
The function that the component will wrap. It will pass on the nextCard
. Which is one of the objects provided by the questions array.
The type of animations. Currently two different types provided. Feel free to play with them