react-native-chatbot

    0.0.1-alpha.12 • Public • Published

    React Native Chatbot

    npm version

    A react native chatbot component to create conversation chats. Based on react-simple-chatbot.

    Getting Start

    npm install react-native-chatbot --save

    Usage

    import ChatBot from 'react-native-chatbot';
     
    const steps = [
      {
        id: '0',
        message: 'Welcome to react chatbot!',
        trigger: '1',
      },
      {
        id: '1',
        message: 'Bye!',
        end: true,
      },
    ];
     
    <ChatBot steps={steps} />

    Documentation

    Properties

    Name Type Default Description
    avatarStyle PropTypes.object The style object to use to override the avatar element
    avatarWrapperStyle PropTypes.object The style object to use to override the avatar surrounding element
    botAvatar PropTypes.string img Bot image source
    botBubbleColor PropTypes.string #6E48AA Bot bubble color
    botDelay PropTypes.number 1000 The delay time of bot messages
    botFontColor PropTypes.string #fff Bot font color
    bubbleStyle PropTypes.object The style object to use to override the bubble element
    optionStyle PropTypes.object The style object to use to override the option container
    optionElementStyle PropTypes.object The style object to use to override the option element
    optionFontColor PropTypes.string Option font color
    optionBubbleColor PropTypes.string Option bubble color
    className PropTypes.string Add a class name to root element
    contentStyle PropTypes.object The style object to use to override the scroll element
    customDelay PropTypes.number 1000 The delay time of custom messages
    customStyle PropTypes.object The style object to use to override the custom step element
    footerStyle PropTypes.object The style object to use to override the footer element
    handleEnd({ renderedSteps, steps, values }) PropTypes.func The callback function when chat ends
    headerComponent PropTypes.element Header component for the chatbot
    hideUserAvatar PropTypes.bool false If true the user avatar will be hidden in all steps
    inputStyle PropTypes.object The style object to use to override the input element
    keyboardVerticalOffset PropTypes.number ios ? 44 : 0 Vertical offset of keyboard view. Check keyboardVerticalOffset
    placeholder PropTypes.string Type the message ... Chatbot input placeholder
    steps PropTypes.array The chatbot steps to display
    style PropTypes.object The style object to use to override the submit button element
    submitButtonStyle PropTypes.object The style object to use to override the button element
    submitButtonContent PropTypes.string or PropTypes.element SEND The string or object to use to override the button content
    userAvatar PropTypes.string img User image source
    userBubbleStyle PropTypes.string img The style object to use to override the user's bubble element
    userBubbleColor PropTypes.string #fff User bubble color
    userDelay PropTypes.number 1000 The delay time of user messages
    userFontColor PropTypes.string #4a4a4a User font color
    scrollViewProps PropTypes.object #4a4a4a Use to override scroll view props

    Steps

    Text Step

    Name Type Required Description
    id String / Number true The step id. Required for any step
    message String / Function true The text message. If function, it will receive ({ previousValue, steps }) params
    trigger String / Number / Function false The id of next step to be triggered. If function, it will receive ({ value, steps }) params
    avatar String false the avatar to be showed just in this step. Note: this step must be a step that avatar appears
    delay Number false set the delay time to message be shown
    end Boolean false if true indicate that this step is the last
    inputAttributes Object Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
    metadata Object Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

    Example:

    {
      id: '1',
      message: 'Hello World',
      trigger: '2',
    },
    {
      id: '2',
      message: ({ previousValue, steps }) => 'Hello',
      end: true,
    }

    User Step

    Name Type Required Description
    id String / Number true The step id. Required for any step
    user Boolean true if true indicate that you waiting a user type action
    trigger String / Number / Function false The id of next step to be triggered. If function, it will receive ({ value, steps }) params
    validator String / Number false if user attribute is true you can pass a validator function to validate the text typed by the user
    end Boolean false if true indicate that this step is the last
    inputAttributes Object Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
    metadata Object Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

    Example:

    {
      id: '1',
      user: true,
      inputAttributes: {
        keyboardType: 'email-address'
      },
      end: true,
    }

    Options Step

    Name Type Required Description
    id String / Number true The step id. Required for any step
    options Array true Array of options with { label, value, trigger } properties
    end Boolean false if true indicate that this step is the last
    inputAttributes Object Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
    metadata Object Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

    Example:

    {
      id: '1',
      options: [
        { value: 1, label: 'Number 1', trigger: '3' },
        { value: 2, label: 'Number 2', trigger: '2' },
        { value: 3, label: 'Number 3', trigger: '2' },
      ],
    }

    Custom Step

    Name Type Required Description
    id String / Number true The step id. Required for any step
    component Component true Custom React Component
    replace Boolean false if true indicate that component will be replaced by the next step
    waitAction Boolean false if true indicate that you waiting some action. You must use the triggerNextStep prop in your component to execute the action
    asMessage Boolean false f true indicate that the component will be displayed as a text step
    trigger String / Number / Function false The id of next step to be triggered. If function, it will receive ({ value, steps }) params
    delay Number false set the delay time to component be shown
    end Boolean false if true indicate that this step is the last
    inputAttributes Object Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
    metadata Object Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

    Example:

    {
      id: '1',
      component: <CustomComponent />
      trigger: '2'
    }

    Update Step

    Name Type Required Description
    id String / Number true The step id. Required for any step
    update String / Number true The id of next step to be updated
    trigger String / Number / Function false The id of next step to be triggered. If function, it will receive ({ value, steps }) params
    inputAttributes Object Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
    metadata Object Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

    Example:

    {
      id: '1',
      options: [
        { value: 1, label: 'Number 1', trigger: '3' },
        { value: 2, label: 'Number 2', trigger: '2' },
        { value: 3, label: 'Number 3', trigger: '2' },
      ],
    }

    Custom Component

    When you declare a custom step, you need indicate a custom React Component to be rendered in the chat. This custom component will receive the following properties.

    Name Type Description
    previousStep PropTypes.object Previous step rendered
    step PropTypes.object Current step rendered
    steps PropTypes.object All steps rendered
    triggerNextStep({ value, trigger }) PropTypes.func Callback function to trigger next step when user attribute is true. Optionally you can pass a object with value to be setted in the step and the next step to be triggered
    inputAttributes Object Set any attributes on the input field (keyboardType, autoCapitalize, autoComplete)
    metadata Object Set of key-value pairs that you can attach to an object. This can be useful for storing additional information about the object in a structured format

    How to Contribute

    Please check the contributing guide

    Authors

    Lucas Bassetti
    Lucas Bassetti

    See also the list of contributors who participated in this project.

    Donate

    If you liked this project, you can donate to support it ❤️

    paypal

    License

    MIT · Lucas Bassetti

    Install

    npm i react-native-chatbot

    DownloadsWeekly Downloads

    87

    Version

    0.0.1-alpha.12

    License

    MIT

    Unpacked Size

    65.2 kB

    Total Files

    31

    Last publish

    Collaborators

    • lucasbassetti