react-botui

React bindings for BotUI

Install

$ npm install react-botui botui

Usage

import React, { Component } from 'react';
import BotUI from '@chentsulin/react-botui';

class App extends Component {
  state = {
    messages: [
      {
        human: true,
        content: 'hello',
      },
      {
        content: 'world',
      },
    ],
  };

  handleAction = res => {
    this.setState({
      messages: [
        ...this.state.messages,
        {
          human: true,
          content: res.value,
        },
        {
          content: `Received ${res.value}!`,
        },
      ],
    });
  };

  handleReset = () => {
    this.setState({
      messages: [],
    });
  };

  render() {
    return (
      <div className="App">
        <BotUI
          messages={this.state.messages}
          action={{
            type: 'text',
            action: {
              placeholder: 'Enter your text here',
            },
          }}
          onAction={this.handleAction}
        />
        <button onClick={this.handleReset}>Reset</button>
      </div>
    );
  }
}

You should import botui.min.css, botui-theme-default.css, vue.min.js from cdn, file, node_modules(For example: botui/build/botui.min.css) or wherever can find the code. See BotUI install docs for more details.

Checkout full examples here.

Relevant Projects

• botui

License

MIT © C.T. Lin