react-conversation-form

A React wrapper for Space10's Conversational Form

Usage no npm install needed!

<script type="module">
  import reactConversationForm from 'https://cdn.skypack.dev/react-conversation-form';
</script>

README

react-conversation-form · npm npm

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

v2.X is not compatible with v1.X. You'll need to change your implementation. The key difference is the use of new components instead of the 'questions' prop.

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 ]+quot;>
          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