Storyblok Tutorial #13: Dynamic Components

one of the coolest features of storyblock is the ability to create your own reusable custom components then from these custom components you can build your own pages let's do that here on our landing page first let's create a new field and call it components and give it a type of blocks which enables us to put our custom components into this field our goal now is to move our all blocks navigation into a new custom component we can create a new component in the components tab and we will create a new group for these components as well let's name our new component blocks section and let's leave the default checkboxes as they are with our component created we can head back to our home page and add the block section into the components field if we now check the api we should see our block section in it now we will create the block section component in our code as well and it will contain a dummy text now we need to explain how to render the blocks field type as we use this for our field as you can see this is the api response we need to get the story.content part from it which we are already getting from the api and it's saved as a data which is then passed down through the block property we can see in our api response that the components is an array so we will need to iterate through it as we named our field in storyblock components we need to use its name in our template we forgot to define the property in the component so we will do it now the array contains all the necessary information about our components including their name so we will use it to specify which component to render with all this done why isn't our new component rendering the only thing we forgot is registering the new component in our main javascript file with this done we can already see our new component rendering our next step is now to move the template and the javascript code into this new file with this we can see that the component works correctly and we can clean up our landing page now we can define new fields in our box section component let's say we wouldn't want to have this all blocks text hard coded but get it from the stored block itself for this to work we need to create a new field let's call it title and it will be text type just write in the new title to be able to use this new field in our component we need to pass down the storyblock data in a similar fashion as we are doing it in the main storyblock file now we just need to define the props in our new component as well and map it to the template with this the new text is already visible we can now have multiple instances of the same component for demonstration purposes we will duplicate our component and change the title of the second instance as our code is fully dynamic it's really easy to reuse our custom components

Channel: LIFTED

Views: 195

Keywords: storyblok, tutorial, cms, headless, web, dev, development, js

Id: -U3MDbODAYg

Length: 3min 51sec (231 seconds)

Published: Fri Oct 01 2021