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