Composition API examples

The following examples allow you to get information about Uniform components and compositions through the API.

This section provides examples of how to interact with components defined in a Uniform project.

This example demonstrates how to retrieve all component definitions from a Uniform project.

import { CanvasClient } from '@uniformdev/canvas'; const client = new CanvasClient({ apiKey: '[!!! UNIFORM API KEY !!!]', projectId: '[!!! UNIFORM PROJECT ID !!!]', }); client.getComponentDefinitions().then(result => { const { componentDefinitions } = result; //Do something with the definitions. });

info

For more information, see the package reference for CanvasClient.

This example demonstrates how to retrieve the definitions for composition components from a Uniform project.

import { CanvasClient } from '@uniformdev/canvas'; const client = new CanvasClient({ apiKey: '[!!! UNIFORM API KEY !!!]', projectId: '[!!! UNIFORM PROJECT ID !!!]', }); client.getComponentDefinitions().then(result => { const definitions = result .componentDefinitions .filter(d => d.canBeComposition); //Do something with the definitions. });

info

For more information, see the package reference for CanvasClient.

This section provides examples of how to interact with compositions defined in a Uniform project.

The following example demonstrates how to list all compositions that are in a published state.

import { CanvasClient } from '@uniformdev/canvas'; const client = new CanvasClient({ apiKey: '[!!! UNIFORM API KEY !!!]', projectId: '[!!! UNIFORM PROJECT ID !!!]', }); client.getCompositionList().then(result => { // //Since the options specified may result in //multiple compositions being returned, you //can expect the property "compositions" to //be available. const { compositions } = result; // //An array of compositions was returned. console.log(`${compositions.length} compositions found.`); let i=0; compositions.forEach(member => { const {composition} = member; console.log(`${++i}. ${composition._name}`); }); });

info

For more information, see the package reference for CanvasClient.

The following example demonstrates how to get all compositions that are based on a specific component type and are in a draft state.

import { CanvasClient } from '@uniformdev/canvas'; const client = new CanvasClient({ apiKey: '[!!! UNIFORM API KEY !!!]', projectId: '[!!! UNIFORM PROJECT ID !!!]', }); client.getCompositionList({ state: 0, type: 'page', }).then(result => { // //Since the options specified may result in //multiple compositions being returned, you //can expect the property "compositions" to //be available. const { compositions } = result; // //An array of compositions was returned. console.log(`${compositions.length} compositions found.`); let i=0; compositions.forEach(member => { const {composition} = member; console.log(`${++i}. ${composition._name}`); }); });

info

For more information, see the package reference for CanvasClient.

Last modified
Next
Generative AI