🤖 React Conversational UI
A react component for conversational UI. Define your question and get the users input in return.
How to use
Define the questions
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 React component
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>
);
}💅 Themeing
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',
};Example questions
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',
}]
}];📦 Dependencies
- Create React App <3
- Styled Components
- Flexbox