Skip to content

Commit 9dc3aed

Browse files
hugobarragonhugobarragon
committed
bump npm badge version
1 parent 4da9e22 commit 9dc3aed

File tree

1 file changed

+54
-57
lines changed

1 file changed

+54
-57
lines changed

‎README.md

Lines changed: 54 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# react-quizzes
22

33
[![MIT License](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=plastic)](http://opensource.org/licenses/MIT)
4-
[![npm version](https://img.shields.io/badge/npm-v0.1.0-green.svg?style=plastic)](https://www.npmjs.com/package/react-quizzes)
4+
[![npm version](https://img.shields.io/badge/npm-v0.2.0-green.svg?style=plastic)](https://www.npmjs.com/package/react-quizzes)
55

66
Demo:
77
[![Edit react-quizzesExample](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/magical-chandrasekhar-88del?fontsize=14&hidenavigation=1&theme=dark)
@@ -12,6 +12,7 @@ React form builder and form delivery solution for admins and clients that makes
1212
Inspired by abandoned project: https://github.com/blackjk3/react-form-builder
1313

1414
Advantages:
15+
1516
- Supports custom inputs
1617
- Rich text questions
1718
- Supports custom styles
@@ -36,84 +37,79 @@ For custom styling check [`Custom styles`](#Custom-styles) section
3637

3738
`react-quizzes` requires `react` and `react-dom` as [`peerDependency`](https://docs.npmjs.com/files/package.json#peerdependencies)
3839

39-
# QuizzBuilder
40+
# QuizzBuilder
4041

4142
```html
42-
import { QuizzBuilder } from "react-quizzes"
43-
<QuizzBuilder
44-
onChange={(QuizzData) => console.log(form)}
45-
/>
46-
````
43+
import { QuizzBuilder } from "react-quizzes" <QuizzBuilder onChange={(QuizzData)
44+
=> console.log(form)} />
45+
```
4746

4847
## API
48+
4949
QuizzBuilder component objective is to provide the user a nice and smooth interface to build quizzes
5050

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

5959
# Quiz
6060

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

6363
```html
64-
import { Quiz } from "react-quizzes"
65-
<Quiz
66-
data={Mockdata}
67-
onSubmit={(values) => console.log("form submited values", values)}
68-
/>
69-
````
64+
import { Quiz } from "react-quizzes" <Quiz data={Mockdata} onSubmit={(values) =>
65+
console.log("form submited values", values)} />
66+
```
7067

7168
## API
7269

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

82-
* if submit button is hidden the default onSubmit will not work, you must implement a custom submit
79+
- if submit button is hidden the default onSubmit will not work, you must implement a custom submit
8380

8481
## Custom submit
8582

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

8885
[`wrappedComponentRef`](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140)
8986

9087
```jsx
91-
import { Quiz } from "react-quizzes"
92-
93-
saveQuizRef =(quizRef) => {
94-
// saves Quizz component ref
95-
this.quizRef = quizRef;
96-
}
97-
// custom submit function
98-
handleCustomSubmit= () =>{
99-
const form = this.quizRef.props.form;
100-
form.validateFields((err, values) => {
101-
if (!err) {
102-
// if no errors, no errors means required answers are filled
103-
console.log('Received values of form: ', values);
104-
form.resetFields(); // resets form after recieveing values
105-
}
106-
107-
});
108-
}
88+
import { Quiz } from "react-quizzes";
89+
90+
saveQuizRef = quizRef => {
91+
// saves Quizz component ref
92+
this.quizRef = quizRef;
93+
};
94+
// custom submit function
95+
handleCustomSubmit = () => {
96+
const form = this.quizRef.props.form;
97+
form.validateFields((err, values) => {
98+
if (!err) {
99+
// if no errors, no errors means required answers are filled
100+
console.log("Received values of form: ", values);
101+
form.resetFields(); // resets form after recieveing values
102+
}
103+
});
104+
};
109105
<Fragment>
110-
<Quiz
111-
wrappedComponentRef={this.saveQuizRef}
112-
submitButton={false} // hides inside submit button
113-
data={Mockdata}
114-
/>
115-
<Button onClick={this.handleCustomSubmit}>Custom Submit btn</Button>
116-
</Fragment>
106+
<Quiz
107+
wrappedComponentRef={this.saveQuizRef}
108+
submitButton={false} // hides inside submit button
109+
data={Mockdata}
110+
/>
111+
<Button onClick={this.handleCustomSubmit}>Custom Submit btn</Button>
112+
</Fragment>;
117113
```
118114

119115
# Translations/Internationalization
@@ -138,7 +134,7 @@ function App() {
138134
return <QuizzBuilder
139135
onChange={(form) => console.log(form)}
140136
language="pt-PT"
141-
messages={toolBoxItems}
137+
messages={toolBoxItems}
142138
/>
143139
}
144140
```
@@ -167,7 +163,7 @@ toolbox.push(
167163
name: "toolbox.input.name", // id of translation
168164
questions: {
169165
"en": "How are you ?"
170-
...
166+
...
171167
},
172168
// description: "toolbox.headertext.description", // desciption under input on toolbox
173169
icon: <Avatar icon="line" />, // this will go to Dom so can be string|| jsx component
@@ -183,6 +179,7 @@ function App() {
183179
/>
184180
}
185181
```
182+
186183
[MyInput example](./src/ToolBox/Components/TextInput.tsx)
187184

188185
Example:

0 commit comments

Comments
 (0)