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

  1. Create a new React component that isn't from the CSK (a video player).
  2. Test your new component using Storybook.
  3. Review how the component source is registered with Uniform.
  4. Define the component in the Uniform component library.
  5. Learn about exposing component props as Canvas parameters a business user can control.
  6. Add the new component to a composition (page).
  7. Learn how to enable inline editing with your component.
  1. 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.

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

    src/canvas/index.ts

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

    src/stories/canvas/VideoPlayer.stories.tsx

  2. Open a new terminal in the root of your web application.
  3. Enter the following command:
  4. A new browser tab opens with Storybook loaded. Navigate to the story VideoPlayer to interact with the rendered component.
    youtube-story
    The Storybook webpage after selecting Video Player

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:

    FieldValue
    Component NameVideo Player
    Public IDvideoPlayer
    Component IconFilm

    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:

    NamePublic IDTypeOptions
    TitletitleText
    DescriptiondescriptionText
    IdidText
    SourcesourceDropdown ListYouTube|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.

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.

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:
    ParameterValue
    TitleA Magical Cup of Coffee
    DescriptionHow do you create magic in a cup? This is how!
    IdlpHAIp60mXs
    SourceYouTube
  5. Click Publish.

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