Unsure how `sliceProps` works

Developing with Prismic
1

I'm developing a site based off the next JS blog starter project, currently trying to pass a simple prop into my slices:

  <SliceZone
          slices={project.data.slices}
          components={components}
          sliceProps={{ highlightBg: project.data.highlight_color }}
        />

In my slices, if i look at the slice data thats passed in:

const ImageBlock = ({ slice }) => {
  console.log({ slice });

There's no sign of the sliceProp object.

Maybe i'm missing something stupid, but the example in your docs is more complicated than I need - it appears to target slices by name, index, or type? not sure what I would pass for these values, and I don't need to target any particular slice in this case. There's also mention of a resolver function, is that still neccesary? I see now your example project passes components, perhaps instead?

Some slightly more complete / up to date documentation would help here!

2

Hey there! I recommend checking out the Image field documentation withinformation on how to render the images in your app.

4

Thanks @Pau, but perhaps my ImageBlock slice is a distraction here. Im definitely using <PrismicNextImage> within it, and have other reasons to make a custom slice for it.

What I really need to know is for this slice, and others, how I can get the value of highlightBG which is defined at the page level.

5

It is a top level field outside of a Slice, if that's the case then you just need to retrieve the data in project, then you should be able to find those fields in the first or second node of the response object. Have you tried to log the response in the terminal?

6

Hmm no i'm not sure how I would do that... how do I access the response to log it from inside a slice component?

What is wrong with using sliceProps? it seems like the thing I should be using... does it not work? is it deprecated??

Basically i have 'project' pages which are like the example project blog post pages. Each project has a custom highlight color, some set stuff at the top of the page, and then slices that alternate between image and text blocks.

Sometimes those slices need to use the highlight color in their css. I can think of some hacky ways I might be able to acheive this, but passing the highlight color from the project page wrapper -> <SliceZone> -> slices seems clean? if it works!

7

Now you can use context, instead of sliceprops. See the following example

<SliceZone
   slices={project.data.slices}
   components={components}
   context={{ highlightBg: project.data.highlight_color }}
/>
1 Like
8

Perfect, thanks. I tried this and was able to get the context data within my slices.

const TextBlock = ({ slice, context }) => {
  console.log({ context });
1 Like