A react component for conversational UI. Define your question and get the users input in return.
The questions supports these field.
text- the text for your question (string) (required)image- url to a image (string)buttons- if you want to have answer alternatives (array)key- the key that will be returned with the questions. If not key defined the question will not be returned.
The component take these props:
questions- an array of questions.onEnded- function to return the user input when session ends.theme- styles and settings (optional)
import Conversation from '../containers/Conversation'; const App = (props) => { function getUserAnswers(answers) { console.log('answers', answers); } return ( <div> <Conversation questions={questions} onEnded={getUserAnswers} theme={theme} /> </div> ); }You can customize the size, colors, fonts and avatars.
const theme = { blobColor: 'cyan', userBlobColor: 'deeppink', user: '👀', bot: '😾', baseColor: '#ccc', font: "'courier', monotype", height: '500px', width: '500px', };Questions:
const questions = [{ text: 'Hello!', }, { text: 'What is your first name?', key: 'firstName', }, { text: 'How are you?', key: 'emotion', buttons: [{ text: 'Awesome!', value: 'great', }, { text: 'Good', value: 'good', }, { text: 'Could be better', value: 'medium', }, { text: 'Not so good...', value: 'bad', }] }, { text: 'Do you like this image?', key: 'imageLike', image: 'https://unsplash.it/400/300/?random', buttons: [{ text: 'Yes, looks great!', value: 'yes', }, { text: 'No really...', value: 'no', }] }];- Create React App <3
- Styled Components
- Flexbox