Composition API examples
The following examples allow you to get information about Uniform components and compositions through the API.
Components#
This section provides examples of how to interact with components defined in a Uniform project.
Get all component definitions#
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.
Get composition component definitions#
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.
Compositions#
This section provides examples of how to interact with compositions defined in a Uniform project.
Get all compositions#
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.
Get compositions by type#
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.