A2UI React Renderer
npm install @easyops-cn/a2ui-reactA React renderer library for A2UI protocol.
Supports all components in A2UI standard catalog out of the box. Built with shadcn/ui and Tailwind CSS.
Currently A2UI protocol v0.8 is fully supported. Work on v0.9 is in progress.
``sh`
npm install @easyops-cn/a2ui-react
First, use the @source directive to tell Tailwind to scan the library code for class names in your global CSS:
`css`
@source "../node_modules/@easyops-cn/a2ui-react";
Next, use A2UIProvider and A2UIRenderer to render A2UI messages:
`tsx
import {
A2UIProvider,
A2UIRenderer,
type A2UIMessage,
type A2UIAction,
} from '@easyops-cn/a2ui-react/0.8'
function App() {
const messages: A2UIMessage[] = []
const handleAction = (action: A2UIAction) => {
console.log('Action received:', action)
}
return (
)
}
`
You can override default components or add new custom components via the components prop on A2UIProvider, which takes a Map.
`tsx
import {
A2UIProvider,
A2UIRenderer,
type A2UIMessage,
type A2UIAction,
} from '@easyops-cn/a2ui-react/0.8'
const ComponentsMap = new Map
// Override default Button component with a custom one
['Button', CustomButtonComponent],
// Add a new custom Switch component
['Switch', CustomSwitchComponent],
])
function App() {
return (
)
}
`
Custom button component with action dispatch:
`tsx
import {
useDispatchAction,
ComponentRenderer,
type ButtonComponentProps,
} from '@easyops-cn/a2ui-react/0.8'
export function CustomButtonComponent({
surfaceId,
componentId,
child,
action,
}: ButtonComponentProps) {
const dispatchAction = useDispatchAction()
const handleClick = () => {
if (action) {
dispatchAction(surfaceId, componentId, action)
}
}
return (
)
}
`
Custom switch component with data binding:
`tsx
import { useDataBinding, useFormBinding } from '@easyops-cn/a2ui-react/0.8'
export function CustomSwitchComponent({
surfaceId,
componentId,
label,
value,
}: SwitchComponentProps) {
const labelText = useDataBinding
const [checked, setChecked] = useFormBinding
const handleChange = (newChecked: boolean) => {
setChecked(newChecked)
}
return (
{labelText}
)
}
``