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 walk you through updating the Slice model using the code snippets generated in The Slice Builder. We will also apply CSS for the default model and variation model which we will preview in StoryBook.


Update and style the component

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

Update the component code

The Slice Builder shows suggested code snippets for each of the fields.

  • Click on the  '</> Show code widgets' button to reveal these snippets.

Copy each code snippet and paste it into your component index.js file.

  • The code snippets in the repeatable zone come wrapped in a loop, you should compile all of these fields into the same loop when pasting them into your project.

In our example, it will be ~/slices/TextImageRight/index.js

Showing code snippets in the Slice Builder

Here's the component file with the code snippets for the fields we added from the Slice Builder:

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

const TextImageRight({ slice }) {
  <section>
    <div>
      <RichText render={slice.primary.textField} />
    </div>
    <div>
      <img src={slice.primary.image.url} alt={slice.primary.image.alt} />
    </div>
  </section>
}

export default TextImageRight

Once we update this and save you see this change reflected straight away in Storybook.

Coding & Styling Variations

As described in the Create and Model a component article, we have different variations of the 'TextImageRight Slice':

Default Slice: In the Default Slice view, we will show Image should float to the right in a text.

TextImageLeft: In the TextImageLeft view, we will show Image should float to the left in a text.

TitleImage: In this variation, we will show the title and image at the centre.

The slice.variation property

The slice.variation property is what is returned by the API to tell you which Variation is in use in the document by the content creators. The slice.variation will be the Variation ID of the Slice. You will find Variation ID in the Slice Builder when you select the slice variation from the dropdown.

For the example we created earlier these are the options that will be returned by the API:

Slice variation

Variation ID

Default Slice

default-slice

TextImageLeft

textImageLeft

TitleImage

titleImage

Conditionally render variations

If your Slice variations have different fields, you’ll need to cover the cases using a conditional statement.

In our case, we have a TextImageRight Slice that has two different variations: TextImageLeft and TitleImage. Only the TitleImage slice has a different field that is a Title field.

Here's the updated code with the conditional statements:

Copy
import React from "react";
import { RichText } from "prismic-reactjs";

function TextImageRight({ slice }) {
  return (
    <section className={slice.variation}>
      <div className="top-title">
        {slice.variation === "titleImage"?
        <RichText render={slice.primary.title} /> : null }
      </div>
      <div className="image-desc">
        {slice.variation !== "titleImage"?
        <RichText render={slice.primary.textField} /> : null }
      </div>
      <div className="side-image">
        <img
          src={slice.primary.image.url}
          alt={slice.primary.image.alt}
        />
      </div>
    <section/>
}

Style your component

Now that you've added the code of your fields, you're going to want to add styles to your component to match your design.

Also, if you've added variations to your Slices, you can use the slice.variation property to render different classNames to reflect the changes in your style for the variations.

Continuing our earlier example, we want to make the text and image switch from left to right in the textImageRight and textImageLeft Variations, and to center everything when the titleImage Variation is in use. We'll use jsx in the <style> element to target each specific class.

Below is the full code & CSS of the component:

Copy
import React from "react";
import { RichText } from "prismic-reactjs";

function TextImageRight({ slice }) {
  return (
    <section className={slice.variation}>
      <div className="top-title">
        {slice.variation==="titleImage"?
        <RichText render={slice.primary.title} /> : null }
      </div>
      <div className="image-desc">
        {slice.variation !== "titleImage"?
        <RichText render={slice.primary.textField} /> : null }
      </div>
      <div>
        <img
          src={slice.primary.image.url}
          alt={slice.primary.image.alt}
        />
      </div>
      <style jsx global>{`
      .default-slice {
         flex-direction: row;
         height: 130px;
         display: flex;
      }
      .textImageLeft {
         flex-direction: row-reverse;
         height: 130px;
         display: flex;
      }
      .titleImage {
        flex-direction: column;
        text-align: center;
      }
      .top-title {
        text-align: center;
      }
      .image-desc {
        padding: 2% 5%;
        width: 80%;
      }
      img {
        max-width: 200px;
        border-radius: 9%;
      }
    `}</style>
  </section>
  );
}

export default TextImageRight;

Preview your Component

Once you've made your changes to the components, you can see these reflections in different Slice variations with mock data in Storybook. To see changes, click on the Open in Storybook button in the Slice Builder or visit the Storybook interface at http://localhost:8888.

Here's a preview of the example textImageRight Slice we've been working on:


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.