Code & Style Components

Beta

These docs rely on Slice Machine, which is in active development and subject to change. Content Relationships are not currently supported with Slices.

This article will show you how to build & style components in isolation with Storybook using the mock data generated in The Slice Builder.



Launch the Local Component Dev Environment

Our Dev Tools come with a built-in local development environment. Once you launch it will be automatically prompted to a new browser tab on http://localhost:8888. This tool will then put together your component code, Slice model, and mock data to allow you to develop your component in isolation without the need to add data to your Prismic repository.

If it isn't launched yet, open a new terminal window and run the following command:

  • npm
  • yarn
Copy
npm run storybook
Copy
yarn run storybook

What is Storybook?

To learn more about this powerful tool and what else you can do with it, visit our full documentation:

Storybook Docs

Update & Style the Component

Now we can begin working on our component. For this example, we're going to continue working on our TextImageBlock component from the Generate and Model a Component article.

Update your Component Code

Templating your content in your project is easy thanks to Slice Machine. The Slice Builder shows suggested code snippets for each of the fields in your content model depending on your framework. Simply click the 'Show code widgets' checkbox, then copy and paste the code in your component's index.js file, in this case, ~/slices/TextImageBlock/index.js:

Style your Component

For styling our component we can use the Component Development Environment that we launched above to see the live updates to our style with the mock data from The Slice Builder, this is by default at http://localhost:8888.

Component code and it's preview in Storybook

For our example we want simply two columns, so we'll add our image in one div and our text field in another, then we can use CSS Grid to create 2 columns from the divs. In this example, we're using JSX.

Below is the full code & CSS of the component:

Copy
import React from 'react'
import { RichText } from 'prismic-reactjs'

const TextImageBlock = ({ slice }) => (
  <section className="textimage">
    <div>
      <img
        src={slice.primary.image.url}
        alt={slice.primary.image.alt}
      />
    </div>
    <div>
      <RichText render={slice.primary.textField} />
    </div>
    <style jsx global>{`
      .textimage {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 25px;
      }
      @media (max-width: 767px) {
        .textimage {
          grid-template-columns: 1fr;
        }
      }
      `}</style>
  </section>
)

export default TextImageBlock

Preview your Component

Once you've made your changes visit the Component Development Environment again. Now you can quickly make changes to components locally before sending your Slices to Prismic, which we will learn about in the next article!


Next & Previous Articles


Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.