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:

Create front-end component#

1. In your source code, add the following file:

   src/canvas/VideoPlayer.tsx

   CopyCopied!Wrap

   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.

2. Update the following file to add item for a video player:

   src/canvas/index.ts

   CopyCopied!Wrap

Add Storybook support for component#

1. In your source code, add the following file:

   src/stories/canvas/VideoPlayer.stories.tsx

   CopyCopied!Wrap
2. Open a new terminal in the root of your web application.
3. Enter the following command:
   CopyCopied!Wrap
4. 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.

1. In Uniform, navigate to Content > Components.

2. Click Add component.

3. 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.

4. 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.

5. 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.

1. In Uniform, open the component Video Player.
2. Click Allow in slot.
3. From the Component dropdown, select Page.
4. From the Slot dropdown, select Page Content.
5. Click Allow in slot.

Add component to composition#

Now you will add the new component to your composition.

1. In Uniform, open the project map.
2. Navigate to Home > Articles > The Golden Ratio of Coffee.
3. Under the Breadcrumb component, add the component Video Player.
4. 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

5. 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.

1. In your source code, update the following file:

   src/canvas/VideoPlayer.tsx

   CopyCopied!Wrap