Create a component
Uniform makes it easy to use your front-end and design system components with Canvas. Your front-end development works with Uniform with little change in process or code.
In the previous lesson, you used components in Canvas. Now you'll walk through creating a new component in the front end project and register it for use with Canvas.
For this exercise you'll add a new video player component to the project so users can add JavaDrip related videos to your application. During the lesson you will:
Goals
- Create a new React component that isn't from the CSK (a video player).
- Test your new component using Storybook.
- Review how the component source is registered with Uniform.
- Define the component in the Uniform component library.
- Learn about exposing component props as Canvas parameters a business user can control.
- Add the new component to a composition (page).
- Learn how to enable inline editing with your component.
Create front-end component#
- In your source code, add the following file:
src/canvas/VideoPlayer.tsx
About this step
The only code in the snippet above that is specific to Uniform is the call to
registerUniformComponent
, which is used when a slot is rendered to determine which React component to use. - Update the following file to add item for a video player:
src/canvas/index.ts
Add Storybook support for component#
- In your source code, add the following file:
src/stories/canvas/VideoPlayer.stories.tsx
- Open a new terminal in the root of your web application.
- Enter the following command:
- A new browser tab opens with Storybook loaded. Navigate to the story VideoPlayer to interact with the rendered component.The Storybook webpage after selecting Video Player
Add component to Uniform component library#
Before you can use the component in Uniform, you must add a component to the Uniform component library to represent the front-end component.
In Uniform, navigate to Content > Components.
Click Add component.
Enter the following values:
Field Value Component Name Video Player
Public ID videoPlayer
Component Icon Film
About this step
The public ID must match the value that was used in the call to
registerUniformComponent
in the front-end component logic.Add the following parameters:
Name Public ID Type Options Title
title
Text Description
description
Text Id
id
Text Source
source
Dropdown List YouTube|Loom
About this step
When you add your first parameter, if you click the down arrow next to Save you will have the option to save and create another parameter.
Click Save and close on the component.
Allow component in slot#
Only certain components are allowed to be added to the slot on your composition. Now you will add your new component to the list of allowed components.
- In Uniform, open the component Video Player.
- Click Allow in slot.
- From the Component dropdown, select Page.
- From the Slot dropdown, select Page Content.
- Click Allow in slot.
Add component to composition#
Now you will add the new component to your composition.
- In Uniform, open the project map.
- Navigate to Home > Articles > The Golden Ratio of Coffee.
- Under the Breadcrumb component, add the component Video Player.
- Enter the following values:
Parameter Value Title A Magical Cup of Coffee
Description How do you create magic in a cup? This is how!
Id lpHAIp60mXs
Source YouTube
- Click Publish.
Enable inline editing#
Uniform supports inline editing for text-type component parameters. Now you will enable inline editing for the title and description parameters on the video player component.
- In your source code, update the following file:
src/canvas/VideoPlayer.tsx