Skip to main content

@uniformdev/canvas-react

Components

UniformComposition

Provides services to render a tree of Canvas components.
- Members
dataCompositionInstance
The composition instance to render.
+ show child attributes
resolveRenderer(component)
Resolves the React component that is responsible for rendering a Canvas component in a slot.
Parameters:
  • componentComponentInstance
    + show child attributes
Returns:
  • Promise<JSX.Element>- Component was resolved.
  • Promise<null>- No component was resolved.
For more information, see example in our developer guide.
behaviorTrackingstring (optional, default value: onView)
If you are using Uniform's classification and tracking features, this property controls when tracking takes place and whether the component is wrapped in any sort of markup.
onLoad - Tracking runs when the page is loaded using the TrackFragment component. When rendered, the component is not wrapped in any markup.
onView - Tracking runs when the component enters the viewport using the Track component. When rendered, the component is wrapped in a div tag, which may cause problems with certain forms of CSS. In this case, use the onLoad value.
For more information, see example in our developer guide.
contextualEditingEnhancer(composition)
If your app uses enhancers, you'll need to pass a function to enhance the data when using contextual editing in Visual Canvas. This function is called on the client side.
Parameters:
  • compositionRootComponentInstance
Returns: Promise<RootComponentInstance>- The enhanced composition

UniformSlot

info

Coming soon.

Hooks

useUniformCurrentComposition

Returns the data of the closest <UniformComposition /> ancestor, or an empty object if none was found.
- Return
{ data?: RootComponentInstance, behaviorTracking?: 'onLoad' | 'onView', resolveRenderer?: Function }

useUniformCurrentComponent

Returns the data of the closest <UniformComponent /> ancestor, or an empty object if none was found.
- Return
{ data?: ComponentInstance, behaviorTracking?: 'onLoad' | 'onView', resolveRenderer?: Function }

useUniformContextualEditing

Adds contextual editing capability to a Uniform app.
This hook is already integrated in <UniformComposition />, you won't need to use it directly, unless you have a custom setup.
- Arguments
initialCompositionValueRootComponentInstance
The initial composition value to render. If applicable, the composition should be enhanced. This is typically the composition provided by getStaticProps.
enhance(composition, hash)
A function to enhance the composition sent by Canvas editor.
Parameters:
  • compositionRootComponentInstance
  • hashstring (optional)- The hash provided by Canvas editor to verify the authenticity of the request.
Returns: Promise<RootComponentInstance>
- Return
{ composition: RootComponentInstance }An object containing the composition coming from Canvas editor.

Functions

createUniformApiEnhancer

Creates an enhance function based on an API endpoint for the hook useUniformContextualEditing.
- Arguments
apiUrlstring
An endpoint that takes a composition and returns an enhanced one. It should handle POST requests.
On Next.js projects, this is typically "/api/preview".