React-native-logical-tree-bot is a versatile React Native package that seamlessly integrates a customizable chatbot component into your applications. Powered by a conditional tree logic, it delivers dynamic and contextually relevant responses based on use
npm install react-native-logical-tree-botReact-native-logical-tree-bot is a versatile React Native package that seamlessly integrates a customizable chatbot component into your applications. Powered by a conditional tree logic, it delivers dynamic and contextually relevant responses based on user answers.
- Conditional Tree Logic: Feed your chatbot with cases (logical nodes) and link them to next cases with a regex check on the user answer.
- Intuitive Integration: Use the power of React to seamlessly feed the logical cases to your Chatbot.
- Customizable UI: Tailor the look and feel of the chat interface to align with your application's design and branding.
Explore a new realm of user interaction and engagement with React-native-logical-tree-bot!
``javascript
{/ Initial case /}
clickableAnswerOptions={['A', 'B']} // prepared clickable options (user can still use keyboard)
id="init">
{/ Case A /}
{/ Case B /}
`
| Props | Type | Description |
| --------------- | -------------- | --------------------------------------------------------------------------------------------- |
| initialStepId | string | The id of the Case that will be the first step (using enum is recommended) |children
| | Chatbot.Case[] | The cases define the content of the potential chatbot messages and the logic of their display |
| Props | Type | Description |
| ----------------------------------- | ------------------------ | ---------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| id | string | Unique id of the case (using enum is recommended) |clickableAnswerOptions
| (optional) | string[] | List of prepared clickable answers |next
| (optional) | {stepId:string | null; condition: RegExp;}[] | List of potential next steps identified whith the case id and conditioned with a regexp. The order of priority is descendent in the array (first has higher priority) |children
| | Chatbot.Case.Paragraph[] | Each paragraph represent the content of a bot message. The bot can send multiple paragraph in a case |
| Props | Type | Description |
| ---------- | ----------------- | --------------------------------------------------------------------- |
| children` | React.JSX.Element | The content of the paragraph. It can be other than Text. Be creative! |
You can a more developped example of rn-logical-treebot in src/examples/Demo implementing the following decision tree (and we strongly encourage you to draw a decision tree before coding your logical tree bot):