1.0.1 • Published 4 years ago
react-open-form v1.0.1
React Open Form
This react library could be connected with an API that follows some specific configurations. An example of the API specification could be seen on swaggerhub
You need a configurable apiUrl and apiKey to connect with the backend. The API sent a collection of forms, questions and sections the react library will know how to render.
Install
npm install --save react-open-form
Usage
import React, { Component } from 'react'
import OpenForm from 'react-open-form'
class Example extends Component {
render () {
return (
<OpenForm
apiUrl='http://example.com/api'
apiKey='API_KEY'
/>
)
}
}
Props
Common props you may want to specify include:
apiUrl
- The API URL of your Api.apiKey
- The API KEY of your Api.entityId
- Entity ID of the user who will use the wizard.entityType
- Entity TYPE of the user who will use the wizard.formId
- The wizard will be shown directly passing its number id. Skipping the list of categories and forms.wizardBackgroundColor
- Optional main background color, if none is passed the default will be applied.styles
- An object to pass custom styles.customLoading
- Optional Loading component, if none is passed the default will be applied.
Customize styles
General
- listContainer - Styles for the list of forms/categories container
- listItem - Styles for the items on the list
- primaryButton - Styles for primary button
- secondaryButton - Styles for secondary button
- loadingContainer - Styles for Loading component container
- wizardContainer - Styles for Form Wizard container
SubSection
- subSectionContainer - Styles for subsection container
- subSectionInfo - Styles for container of name and description
- subSectionName - Styles for subsection name
- subSectionDescription - Styles for subsection description
- subSectionLongDescription - Styles for subsection long description
- subSectionQuestions - Styles for subsection questions container
Progress bar
- progressBarBackground - Styles for progress bar background
- progressBarCompleted - Styles for progress bar completed line
- progressBarLabel - Styles for progress bar label
Questions - Generals
- questionsRowContainer - Styles for row of questions container
- questionContainer - Styles for individual question container
- questionTitle - Styles for question title
- questionDescription - Styles for question description
- questionReadMore - Styles for 'Read More' button
- errorMessage - Styles for questions error message
- metadataQuestion - Styles for metadata questions container
- selectQuestionContainer - Styles for select questions container
Questions - Types
Each question has the same theme by default.
- textInputQuestion - Styles for text input questions
- numberQuestion - Styles for number input questions
- dateQuestion - Styles for date picker questions
- textAreaQuestion - Styles for text area questions
- selectQuestion
IMPORTANT
- Select questions use ReactSelect. On selectQuestion prop you can pass the same type of object you pass on styles prop from react-select. Style Object
Questions - Multiple Answers
- addAnswer - Styles for add new answers button
- removeAnswer - Styles for remove answer button
Example
const customStyles = {
listItem: {
fontSize: '10px',
color: 'black'
}
}
License
MIT © rootstrap