Skip to content

alexgurr/react-conversation-form

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

63 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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