Reusable ReactFlow components for social media bot automation
npm install @webdevarif/reactflowbash
npm install @webdevarif/reactflow
or
yarn add @webdevarif/reactflow
or
pnpm add @webdevarif/reactflow
`
Usage
$3
`tsx
import React from 'react';
import { FacebookWorkflow } from '@webdevarif/reactflow/facebook';
function MyBotBuilder() {
const handleSave = (config) => {
console.log('Workflow saved:', config);
};
const handleNodeClick = (node) => {
console.log('Node clicked:', node);
};
return (
onSave={handleSave}
onNodeClick={handleNodeClick}
height="100vh"
/>
);
}
`
$3
The Facebook workflow supports these message types:
- Text: Simple text messages
- Image: Image messages with media
- Audio: Audio messages
- Video: Video messages
- File: File attachments
- Facebook Media: Facebook-specific media content
- Carousel: Carousel of items
- E-commerce: E-commerce product displays
- AI Reply: AI-powered responses
- Condition: Conditional logic nodes
- Delay: Delay/timer nodes
$3
`tsx
import { facebookNodeTypes } from '@webdevarif/reactflow/facebook';
// Add custom node types
const customNodeTypes = {
...facebookNodeTypes,
customNode: MyCustomNode,
};
`
API Reference
$3
| Prop | Type | Description |
|------|------|-------------|
| initialNodes | Node[] | Initial nodes for the workflow |
| initialEdges | Edge[] | Initial edges for the workflow |
| onSave | (config: WorkflowConfig) => void | Callback when workflow is saved |
| onNodeClick | (node: Node) => void | Callback when a node is clicked |
| onEdgeClick | (edge: Edge) => void | Callback when an edge is clicked |
| className | string | Additional CSS classes |
| height | string \| number | Height of the workflow canvas |
$3
`typescript
interface WorkflowConfig {
name: string;
description?: string;
platform: 'facebook' | 'whatsapp' | 'telegram';
nodes: WorkflowNode[];
edges: WorkflowEdge[];
}
`
Development
`bash
Install dependencies
npm install
Build the package
npm run build
Watch for changes
npm run dev
`
Contributing
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)