react-quizzes

Demo:

React form builder and form delivery solution for admins and clients that makes forms easy peasy. Inspired by abandoned project: https://github.com/blackjk3/react-form-builder

Advantages:

• Supports custom inputs
• Rich text questions
• Supports custom styles
• Internationalization ISO'S
• Internationalization on questions and answers
• Internationalization on Builder
• Centralized form builder and from delivery
• Drag & Drop to order/sort questions on <QuizzBuilder/>

Installation

Install via NPM

npm install --save react-quizzes

Style

For components design we use, antd-design componentes and if you just need som simple things we provide the antd style just import it like this:
import "react-quizzes/lib/assets/antd.css"
For custom styling check Custom styles section

react-quizzes requires react and react-dom as peerDependency

QuizzBuilder

import { QuizzBuilder } from "react-quizzes" <QuizzBuilder onChange={(QuizzData)
=> console.log(form)} />

API

QuizzBuilder component objective is to provide the user a nice and smooth interface to build quizzes

Props	Type	Default	Description
onChange	Function	``	will returns builded quizz in QuizzData type
initialValue	QuizzData	``	initial value to QuizzBuilder, useful if user wants to edit a saved quizz
toolBox	QuizzToolBox	default QuizzToolBox	list of inputs to use, defaults to react-quizz but custom inputs can be supplied
language	string	en	Language that QuizzBuilder will show
messages	QuizzMessages	default QuizzMessages	Object with each language and each language with each text translation

Quiz

A component that provides the final user a quiz/form to fill

import { Quiz } from "react-quizzes" <Quiz data={Mockdata} onSubmit={(values) =>
console.log("form submited values", values)} />

API

Props	Type	Default	Description
data	QuizzData	``	data to build the final user form to be filled
onSubmit	Fucntion	``	returns the submitted form values
submitButton	boolean	true	shows/hides default submit button*
toolBox	QuizzToolBox	default QuizzToolBox	list of inputs to use, defaults to react-quizz but custom inputs can be supplied
language	string	en	Language that Quiz questions and options will show
messages	QuizzMessages	default QuizzMessages	Object with each language and each language with each text translation

• if submit button is hidden the default onSubmit will not work, you must implement a custom submit

Custom submit

There is a prop wrappedComponentRef that gives you access to make basically anything, reset form, set initial values change the values based on something....

wrappedComponentRef

import { Quiz } from "react-quizzes";

saveQuizRef = (quizRef) => {
  // saves Quizz component ref
  this.quizRef = quizRef;
};
// custom submit function
handleCustomSubmit = () => {
  const form = this.quizRef.props.form;
  form.validateFields((err, values) => {
    if (!err) {
      // if no errors, no errors means required answers are filled
      console.log("Received values of form: ", values);
      form.resetFields(); // resets form after recieveing values
    }
  });
};
<Fragment>
  <Quiz
    wrappedComponentRef={this.saveQuizRef}
    submitButton={false} // hides inside submit button
    data={Mockdata}
  />
  <Button onClick={this.handleCustomSubmit}>Custom Submit btn</Button>
</Fragment>;

Translations/Internationalization

New languages support can be added or replace the existing ones
Existing translations

import { QuizzBuilder } from "react-quizzes"
import { defaultMessages } from "react-quizzes/lib/translations/TranslatedText";

// existing keys can be found on above link
defaultMessages["pt"]={
  "toolbox.textinput.name": "Caixa de Texto",
  "confirm.action": "Tem a  certeza?",
  "btn.yes": "Sim",
  "btn.no": "Não",
  "btn.add": "Adicionar",
  ...
}
function App() {
    return <QuizzBuilder
            onChange={(form) => console.log(form)}
            language="pt"
            messages={toolBoxItems}
        />
}

Custom Inputs

Custom inputs can be added to Toolbox, but Toolbox already supplies a great variety of inputs, if you have a new input suggestions fell free to contact this library contributors.

The Toolbox is used on QuizzBuilder and Quiz, so if you created a form with custom input on QuizzBuilder supply the same toolbox to Quiz component so it can display the input

Existing Toolbox

How to add custom input

You just have to pass the prop toolBox and add your new entry to the existing toolbox items, or if you don't want to reuse the existing one just make your one

import { QuizzBuilder } from "react-quizzes"
import defaulttoolBox from "react-quizzes/ToolBox"
import { Avatar } from "antd";
// existing keys can be found on above link
cosnt toolbox=defaulttoolBox()
toolbox.push(
{
      key: "MyInput_",
      name: "toolbox.input.name", // id of translation
      questions: {
            "en": "How are you ?"
            ...
        },
      // description: "toolbox.headertext.description", // desciption under input on toolbox
      icon: <Avatar icon="line" />, // this will go to Dom so can be string|| jsx component
      field_name: "MyInput_", // will add a generated uuidv4
      Component: MyInput // component not instanciated
    }
)

function App() {
    return <QuizzBuilder
            onChange={(form) => console.log(form)}
            toolBox={toolbox}
        />
}

MyInput example

Example: [URL TO FILE]

Custom styles

Default style is supplied import "react-quizzes/lib/assets/antd.css"

but if you need a custom one follow antd-design guidelines and probably you will just want to use less to make it easier

Antd customize theme

License

MIT License

DEV

Start project

  npm i
  npm start

Compile lib for npm

Compile project

  npm i
  npm run compile

Deply lib for Github Pages

Start project

  npm i
  npm run deploy