Skip to content

alexgurr/react-conversation-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

f15d2f3 · Mar 30, 2021

History

63 Commits
Nov 6, 2017
Nov 7, 2017
Nov 7, 2017
Nov 7, 2017
Nov 6, 2017
Nov 1, 2017
Nov 6, 2017
Mar 10, 2020
Aug 22, 2018
Mar 30, 2021

Repository files navigation

react-conversation-form · npm npm

A React wrapper for Conversational Form (https://github.com/space10-community/conversational-form).

Table of Contents

Installation

npm install react-conversation-form --save

or

yarn add react-conversation-form

Usage

For Example (Feedback Form):

 import { Conversation, Select, Question, Option } from 'react-conversation-form';
 // const { Conversation, Select, Question, Option } = require('react-conversation-form');
 
 <Conversation
      onSubmit={() => {}}
      chatOptions={{
          thankTheUser: ['identifier', 'feedbackType'],
          introText: 'Hi there. Lets leave some feedback! To edit any of your responses, just click on them.',
          submitText: 'Thanks for giving us your feedback!'
      }}
  >
      <Select id="feedbackType" question="What type of feedback are you thinking of?">
          <Option value="issue">Issue</Option>
          <Option value="typo">Typo</Option>
          <Option value="praise">Praise</Option>
          <Option value="other">Other</Option>
      </Select>
      <Question id="email" validation={text => text.includes('@')}>
          {'What\'s your company email address, so we can identify you?'}
      </Question>
      <Question id="feedback" validation="^[a-zA-Z ]+$">
          What are you thinking?
      </Question>
  </Conversation>

Options

Conversation

  • onSubmit - function Callback function for the form contents when the user has finished (required)
  • chatOptions - object Extra options for the chat default: {}
    • robotResponseTime - number The time (ms) the robot takes before responding
    • robotChainResponseTime - number The time (ms) the robot takes between chained messages
    • showUserThinking - boolean Whether to show the user writing '...' while waiting for response
    • robotChainResponseTime - number The time (ms) the robot takes between chained messages
    • thankTheUser - array Array of question IDs that the bot should thank the user after answering
    • introText - string The opening message from the bot
    • submittedResponseText - string Closing response message from the bot

Question

Select

Option

ToDo:

  • Expose icons and all configuration options through props (only subset currently supported)
  • Fix tests