Home > @uniformdev/canvas-react
canvas-react package
Functions
| Function | Description |
|---|---|
| convertComponentToProps(component) | Converts a raw Canvas component instance to React component props format. This merges each parameter moved to the root object and removes the 'value' node, hugely simplifying rendering code. For example if the raw object has parameters.foo.value, then the final props have props.foo === raw.parameters.foo.value. |
| DefaultNotImplementedComponent(props) | A default implementation of a component-not-implemented component. Useful for model-first workflows where frontend dev comes later. To make this work, it needs to be the default returned from the resolveRenderer() function when the component is unknown. |
| UniformComponent({ data, resolveRenderer, children, behaviorTracking, contextualEditingDefaultPlaceholder, }) | Allows the rendering of a Canvas component instance (root or not), and its children if it has any. Note that the actual rendering happens inside <code><UniformSlot /></code>, this component only provides the services needed to achieve that. This component is used internally by <code><UniformComposition /></code>, which you should use in most cases. |
| UniformComposition({ data, behaviorTracking, children, resolveRenderer, contextualEditingEnhancer, contextualEditingDefaultPlaceholder, }) | The main component to render a Canvas composition. It renders the full tree of components, and provides some services to the children, such as <code>useUniformCurrentComposition</code>. It also takes care of enabling [Contextual Editing](https://docs.uniform.app/capabilities/composition/contextual-editing). |
| UniformRichTextNode({ node, ...props }) | Render a single RichText node |
| UniformSlot({ name, resolveRenderer, children, emptyPlaceholder, wrapperComponent, }) | Renders a named Slot within a Composition. |
| useCompositionEventEffect({ enabled, projectId, compositionId, effect, }) | Hook to manage a subscription to a realtime event on a composition |
| useUniformCurrentComponent() | Gets the data of the closest <code><UniformComponent /></code> ancestor. |
| useUniformCurrentComposition() | Gets the data of the closest <code><UniformComposition /></code> ancestor. |
Variables
| Variable | Description |
|---|---|
| componentStore | |
| componentStoreResolver | |
| createComponentStore | |
| createComponentStoreResolver | |
| getParameterAttributes | Returns the attributes needed to annotate a Uniform parameter for inline editing. Supports only text parameters at the moment. |
| NOT_IMPLEMENTED_COMPONENT | Can be used to override default component Not Implemented fallback |
| registerUniformComponent | |
| UniformCompositionContext | |
| UniformPlayground | Playground where you can freely live preview your components and pattern. |
| UniformRichText | Adds rendering support for Uniform Rich Text parameters |
| UniformText | Renders text parameters. Offers inline editing capability out of the box. |
| useUniformContextualEditing | Adds contextual editing capability to a Uniform app. This hook is already integrated in <code><UniformComposition /></code>, you won't need to use it directly, unless you have a custom setup. |
| useUniformContextualEditingState | Returns the state of contextual editing, when the app is open inside Canvas Editor. This hook can be used to improve the editing experience of your team. For example: You can use <code>selectedComponentReference</code> to control which element to show inside a carousel or an accordion. |
Type Aliases
| Type Alias | Description |
|---|---|
| ComponentProps | Props passed to a Canvas component implementation. TProps is the Canvas component's parameters object after all enhancers have been applied. |
| ComponentStore | |
| CustomSlotChildRenderFunc | |
| RenderComponentResolver | Function that maps a Canvas component instance to its React component to render it. The resolver would commonly inspect the <code>type</code> and possibly <code>variant</code> of the component to decide. |
| RenderRichTextComponentResolver | Function that maps a Rich Text node instance to its React component to render it. The resolver would commonly inspect the <code>type</code> of the component to decide. |
| RichTextComponentProps | |
| RichTextRendererComponent | |
| SystemRenderConfig | Configures rendering of system components (tests, pz) |
| SystemRenderFunction | Function that renders Canvas system internals |
| UniformComponentContextValue | |
| UniformComponentProps | |
| UniformCompositionProps | |
| UniformPlaygroundDecorator | |
| UniformPlaygroundProps | |
| UniformRichTextNodeProps | |
| UniformRichTextProps | |
| UniformSlotProps | |
| UniformSlotWrapperComponentProps | |
| UniformTextProps | |
| UseCompositionEventEffectOptions | |
| UseUniformContextualEditingProps | |
| UseUniformContextualEditingStateProps |