It can help you to build some React custom question components for creating, editing and answering questions.
You can use it to build a questionnaire app
custom-questions
is available as an npm package.
// with npm
npm install @rinxun/custom-questions
// with yarn
yarn add @rinxun/custom-questions
This project is licensed under the terms of the MIT license.
Here is a quick example to get you started:
import { useState } from 'react';
import { Enums, AnswerGroup, TextAnswerProps } from '@rinxun/custom-questions';
function CustomQuestionDemo() {
const [textValue, setTextValue] = useState('');
return (
<AnswerGroup
answerType={Enums.AnswerTypeEnum.shortText}
question="What's your name?"
answer={
{
name: 'demo',
value: textValue,
onChange: (val: string) => {
setTextValue(val);
},
viewType: Enums.ViewTypeEnum.answer
} as TextAnswerProps
}
/>
)
}
import { useState } from 'react';
import { Enums, AnswerGroup, TextAnswerProps } from '@rinxun/custom-questions';
function CustomQuestionDemo() {
const [textValue, setTextValue] = useState('');
return (
<AnswerGroup
answerType={Enums.AnswerTypeEnum.shortText}
question="What's your name?"
answer={
{
name: 'demo',
value: textValue,
onChange: (val) => {
setTextValue(val);
},
viewType: Enums.ViewTypeEnum.answer
}
}
/>
)
}
We prepared a live and interactive demo for you to get started.
Name | Description |
---|---|
shortText | If you select it, we will render a text input box for you to answer. |
longText | If you select it, we will render a text area for you to answer. |
upload | If you select it, we will render an uploader for you to upload. |
link | If you select it, we will render a link input box for you to type. |
singleChoice | If you select it, we will render a radio group for you to pick. |
multiChoice | If you select it, we will render a checkbox group for you to pick. |
Name | Description |
---|---|
http | Hypertext Transfer Protocol, for loading web pages using hypertext links. |
https | Hypertext Transfer Protocol Secure, a secure version of the HTTP protocol. |
mailto | A type of HTML link that activates the default mail client on the computer for sending an e-mail. |
ftp | File Transfer Protocol, for transferring files between computers. |
sftp | Secure File Transfer Protocol, for transferring large files over the web. |
Name | Description |
---|---|
answer | If you select it, you can answer the question. |
edit | If you select it, you can edit the question. |
preview | If you select it, you can preview the answer area. |
You can use it to switch different answer types.
import { AnswerTypeSelector } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
color | string (keyword, rgb, hex, etc) | false | The main color of the component. | |
label | string | 'Select Answer Type' | false | The label of the Select element. |
onChange | func | true | Callback fired when the Select value is changed.Signature: function(value: AnswerTypeEnum) => void value: The value of the Select element. |
|
value | AnswerTypeEnum | true | The value of the Select element, required for a controlled component. |
|
hiddenOptions | Array<AnswerTypeEnum> | [] | false | The options (answer types) you don't want to show in the options list of the selector. |
It will help you to render a URL input component for answering.
import { LinkAnswer } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
color | string (keyword, rgb, hex, etc) | false | The main color of the component. | |
disabled | bool | false | false | If true , the component is disabled. |
label | string | false | The label of the Input element. |
|
linkType | LinkTypeEnum | true | The value of the Select element, required for a controlled component. |
|
maxLength | number | false | Maximum number of length to type. | |
minLength | number | false | Minimum number of length to type. | |
name | string | false | The name of the Input element. |
|
onChange | func | true | Callback fired when the Input value is changed.Signature: function(value: string) => void value: The value of the Input element. |
|
onToggleLinkType | func | true | Callback fired when the Select value is changed.Signature: function(value: LinkTypeEnum) => void value: The value of the Select element. |
|
required | bool | false | false | If true , the Input is required. |
value | string | true | The value of the Input element, required for a controlled component. |
|
viewType | ViewTypeEnum | true | If preview or edit you can preview the answer component;If answer you can answer the question. |
You can use it to define the total score and the pass score.
import { Scoring } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
color | string (keyword, rgb, hex, etc) | false | The main color of the component. | |
exceededErrText | string | 'Pass Score should be less than the Total Score' | false | The error message when Pass Score is greater then Total Score. |
onChangePassScore | func | true | Callback fired when the Pass Score Input value is changed.Signature: function(value: string) => void value: The value of the Input element for Pass Score. |
|
onChangeTotalScore | func | true | Callback fired when the Total Score Input value is changed.Signature: function(value: string) => void value: The value of the Input element for Total Score. |
|
onToggleScoring | func | true | Callback fired when the Switch value is changed.Signature: function(value: bool) => void value: The value of the Switch element. |
|
passScore | string | number | true | The value of the Input element for Pass Score. |
|
passScoreLabel | string | 'Pass Score' | false | The label of the Input element for Pass Score. |
totalScore | string | number | true | The value of the Input element for Total Score. |
|
totalScoreLabel | string | 'Total Score' | false | The label of the Input element for Total Score. |
turnOffScoring | bool | true | The value of the Switch element. |
|
turnOffScoringLabel | string | 'Turn off scoring' | false | The label of the Switch element. |
It will help you to render a text input component for answering..
import { TextAnswer } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
answerType | AnswerTypeEnum | true | shortText or longText . |
|
color | string (keyword, rgb, hex, etc) | false | The main color of the component. | |
disabled | bool | false | false | If true , the component is disabled. |
label | string | false | The label of the Input element. |
|
maxLength | number | false | Maximum number of length to type. | |
name | string | false | The name of the Input element. |
|
minLength | number | false | Minimum number of length to type. | |
onBlur | func | true | Callback fired when the Input value is blurred. |
|
onChange | func | true | Callback fired when the Input value is changed.Signature: function(value: string) => void value: The value of the Input element. |
|
onFocus | func | true | Callback fired when the Input value is focused. |
|
placeholder | string | 'Type your answer here...' | false | The placeholder of the Input element. |
required | bool | false | false | If true , the Input is required. |
value | string | true | The value of the Input element, required for a controlled component. |
|
viewType | ViewTypeEnum | true | If preview or edit you can preview the answer component;If answer you can answer the question. |
It will help you to render a Uploader component for uploading files.
import { UploaderAnswer } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
id | string|number | true | The unique id of the file. | |
fileName | string | true | The name of the file. | |
fileKey | string | false | The unique key of the file, like from AWS S3. |
Name | Type | Default | Required | Description |
---|---|---|---|---|
chooseFileText | string | 'Choose a file' | false | The text of the Choose button. |
color | string (keyword, rgb, hex, etc) | false | The main color of the component. | |
dropFileText | string | 'Drop files here' | false | The text of the Drop File Area. |
files | Array<FileProps> | true | See File Props above. | |
maxSize | number | 5 (MB) | false | Maximum of the uploading file size, UOM is MB . |
multiple | boolean | false | false | If true then you can upload multiple files |
onDownload | func | true | Callback fired when downloaded the file. Signature: function(id: string) => void id: The unique id of the file, but if fileKey is not null/undefined, here you will get the fileKey instead of the id . |
|
onRemove | func | true | Callback fired when removed the file. Signature: function(id: string) => void id: The unique id of the removing file, but if fileKey is not null/undefined, here you will get the fileKey instead of the id . |
|
onUpload | func | true | Callback fired when uploaded a file. Signature: function(files: Array<File>, index?: number) => void files: Acceptable files you uploaded. index: If more than 1 Uploader in the same page, you can define the index . |
|
sizeExceededErrText | string | Your file exceed the max size of x MB. | false | The alert message when you uploaded a size exceeded file.x is the maximum of the uploading file size, if you set the maxSize that's it, otherwise, default to 5. |
viewType | ViewTypeEnum | true | If preview or edit you can preview the Uploader component;If answer you can upload files. |
|
warmingTips | string | 'Documents can be uploaded in pdf, xls, doc & jpeg formats. Maximum size allowed is x MB.' | false | The tip of the Uploader as helper text.x is the maximum of the uploading file size, if you set the maxSize that's it, otherwise, default to 5. |
wrongFileTypeErrText | string | 'The type of the file you uploaded is not accepted, please reupload!' | false | The alert message when you uploaded an unacceptable file. |
You can use it to create/edit choices.
import { EditChoiceItems } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
correctAnswer | bool | false | If true that means this answer is the correct one.Required when needDefineCorrectAnswer (in the next table) is true . |
|
label | string | 'Choice x' | false | The label of the Input .x is an index number. |
name | string | true | The name of the Input . Also it is the unique id of the choice item. |
|
value | string | true | The value of the Input . |
Name | Type | Default | Required | Description |
---|---|---|---|---|
answerType | AnswerTypeEnum | true | Which kind of component you want to render for the answer. | |
color | string (keyword, rgb, hex, etc) | false | The main color of the component. | |
correctAnswerIconTipText | string | 'Toggle it as correct / incorrect answer' | false | The tooltip text of the tick icon button. |
maxItems | number | false | Maximum number of items to add, it must be greater than 2. If null then unlimited. |
|
maxItemsTipText | string | 'A maximum of x choices can be set!' | false | A warming tip to tell users the maximum number of items to add. Only be displayed when maxItems is not null .x is the maxItem value. |
needDefineCorrectAnswer | bool | false | If true that means you have to define correct answers.At this moment, onToggleCorrectAnswer and correctAnswer are required. |
|
onAddMore | func | true | Callback fired when the Add More button is clicked. Signature: function() => void |
|
onChange | func | true | Callback fired when the Input value is changed.Signature: function(name: string, value: string) => void name: The name of the Input element.value: The value of the Input element. |
|
onRemove | func | true | Callback fired when removed the choice item. Signature: function(name: string) => void name: The name of the Input element. |
|
onToggleCorrectAnswer | func | false | Callback fired when toggle the tick icon button at the end of the choice item. Signature: function(name: string) => void name: The name of the Input element.Required when needDefineCorrectAnswer is true. |
|
options | Array<ChoiceItemProps> | true | See Choice Item Props above. The length of options must be greater than 2. |
It will help you to render a radio group component for answering.
import { SingleChoiseAnswer } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
color | string (keyword, rgb, hex, etc) | false | The main color of the component. | |
name | string | false | The name of the RadioGroup element. |
|
options | Array<{ label: string; value: string }> | true | The radio options for rendering. | |
onChange | func | true | Callback fired when the Radio value is changed.Signature: function(value: string) => void value: The value of the selected Radio element. |
|
value | string | true | The selected value of the RadioGroup element. |
|
viewType | ViewTypeEnum | true | If preview or edit you can preview the RadioGroup component;If answer you can do single select. |
It will help you to render a checkbox group component for answering.
import { MultiChoiseAnswer } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
color | string (keyword, rgb, hex, etc) | false | The main color of the component. | |
name | string | false | The name of the Form element. |
|
onChange | func | true | Callback fired when the Radio value is changed.Signature: function(value: string, checked: boolean) => void value: The value of the checked checkbox element.checked: if true that means the checkbox is checked, otherwise, unchecked. |
|
options | Array<{ label: string; value: string }> | true | The checkbox options for rendering. | |
value | Array<string> | true | The values of all checkedcheckbox elements. |
|
viewType | ViewTypeEnum | true | If preview or edit you can preview the checkbox component;If answer you can do multiple select. |
You can use it to create/edit a question.
import { QuestionGroup } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
answerType | AnswerTypeSelectorProps | true | See props of AnswerTypeSelector . |
|
choices | EditChoiceItemsProps | true | See props of EditChoiceItems . |
|
color | string (keyword, rgb, hex, etc) | false | The main color of the component. | |
inputLabel | string | 'Preview' | false | The label of the TextAnswer and LinkAnswer . |
onChangeQuestion | func | true | Callback fired when the Input value is changed.Signature: function(value: string) => void value: The value of the Input element. |
|
question | string | true | The value of the Question Input element. |
|
questionLabel | string | 'Enter Question' | false | The label of the Question Input element. |
scoring | ScoringProps | false | See props of Scoring . Required if showScoring is true . |
|
showScoring | boolean | false | false | If true , the Scoring will be rendered. |
You can use it to render a component for answering.
import { AnswerGroup } from '@rinxun/custom-questions';
Name | Type | Default | Required | Description |
---|---|---|---|---|
answer | LinkAnswerProps | TextAnswerProps | UploaderAnswerProps | SingleChoiceAnswerProps | MultiChoiceAnswerProps | true | See the corresponding props above. | |
answerType | AnswerTypeEnum | true | Which kind of component you want to render for the answer. | |
question | string | true | The text to describe the question. | |
required | boolean | false | false | If true the red asterisk would be shown next to the question. |
If you have recently updated, please read the changelog for details of what has changed.