0.0.57 • Published 5 years ago
chat-form v0.0.57
Chat Form
chat-form
is a react based chat-bot like form that allows a dev user to customize the message response to a user on every entry and even add validation reply message with Typescript support.
Why?
I needed to use in some of my projects.
Installation
npm install chat-form
or
yarn add chat-form
Usage
Import the component
Javascript
import ChatBot from 'chat-form/dist/js/export';
or lazy load
import React, { lazy, Suspense } from 'react';
const ChatBot = lazy(() => import('chat-form/dist/js/export'));
Typescript
import ChatBot from 'chat-form';
or lazy load
import React, { lazy, Suspense } from 'react';
const ChatBot = lazy(() => import('chat-form'));
Example
import ChatBot from 'chat-form';
const Component = (props) => {
const [questions, setQuestions] = React.useState([
{
question: () => 'First Question',
answerType: 'input',
identifier: 'name',
validator: {
message: (value) => `Your name length should range between 5 - 26 characters`,
validatorCallback: (value) => value.length > 4 && value.length < 27,
},
},
]);
return (
<ChatBot
lastMessage={'Last message after all the questions have been answered'}
onAnswer={setQuestions}
questions={questions}
/>
);
}
Interfaces
####Validator
interface ValidatorObject {
message: (value: any) => string; // value argument is the user input value
validatorCallback: (value: any) => boolean;
}
Question
interface Question {
question: (value: any) => string;
answerType: 'paragraph' | 'input' | 'boolean' | 'select' | 'file' | 'number' | 'csv' | any;
identifier: string; // identifier is the key of response values
options?: string[]; // only if answerType is select
validator?: ValidatorObject;
}
Message
interface Message {
message: string;
sender: 'bot' | 'user';
time?: string;
fileSrc?: string; // Required if message is of file type
file?: File;
}
Props
interface Props {
className?: string;
lastMessage: (value: any) => string; // The message after all the values have been filled. It takes in an object of { [identifier]: user input }
questions: Question[];
initialMessages?: Message[];
onAnswer: (questions: Question[], value?: any) => void; // where value is an object of { [identifier]: user input }
}
Here is the full demo
0.0.57
5 years ago
0.0.56
5 years ago
0.0.55
5 years ago
0.0.53
5 years ago
0.0.50
5 years ago
0.0.49
5 years ago
0.0.47
5 years ago
0.0.48
5 years ago
0.0.46
5 years ago
0.0.37
5 years ago
0.0.36
5 years ago
0.0.35
5 years ago
0.0.34
5 years ago
0.0.33
5 years ago
0.0.32
5 years ago
0.0.31
5 years ago
0.0.30
5 years ago
0.0.29
5 years ago
0.0.28
5 years ago
0.0.27
5 years ago
0.0.26
5 years ago
0.0.25
5 years ago
0.0.24
5 years ago
0.0.23
5 years ago
0.0.22
5 years ago
0.0.21
5 years ago
0.0.20
5 years ago
0.0.19
5 years ago
0.0.18
5 years ago
0.0.17
5 years ago
0.0.16
5 years ago
0.0.15
5 years ago
0.0.14
5 years ago
0.0.13
5 years ago
0.0.12
5 years ago
0.0.11
5 years ago
0.0.1
5 years ago
0.1.0
5 years ago