react-open-form

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