[RFC] Passing additional Properties in SliceZone with SliceProps

Is your feature request related to a problem? Please describe.

Some users would like to pass variables and functions down to Slices through the Slice Zone.

I need to pass several functions and variables to the slices, predominately for event listeners that will affect other areas on the website which are not slices.

So far, the only way I seem to be able to pass these properties to the slices is by using the ‘context’ parameter.

Describe the solution you’d like

Something like the sliceProps property in next-slicezone: https://github.com/prismicio/slice-machine/tree/master/packages/next-slicezone#slicezone

Additional context

Forum Thread: https://community.prismic.io/t/passing-additional-properties-in-slicezone-with-sliceprops/6927/11

[angeloashmore]

There are two recommended ways to pass data to Slice components. Using one of these two methods is preferred, in my opinion, over adding an additional sliceProps prop containing potentially complex logic.

I am curious to hear if there is a use case where one of the two options cannot accomplish what you need. Maybe there is a need for another prop that I missed. 😃

1. Treat React components as functions

Pass Slice-specific data to the components in the components object. Because a React component is a function (we could also call it a “resolver”), something like the sliceProps prop from next-slicezone is built-in. For example:

<SliceZone
  slices={doc.data.body}
  components={{
    text: (props) => (
      <TextSlice myCustomProp={myCustomData} {...props} />
    ),
    images: ImagesSlice,
  }}
/>

In this example, the text Slice will render a <TextSlice> component with a myCustomProp value. Because the props argument has all information about the slice, including the whole slice object, it can also be used to compute these custom props. Just remember to pass any used properties as props again.

<SliceZone
  slices={doc.data.body}
  components={{
    text: ({ slice, ...props }) => (
      <TextSlice theme={slice.primary.theme} slice={slice} {...props} />
    ),
    images: ImagesSlice,
  }}
/>

Here, the theme props is given a value derived from the slice object. slice is passed explicitly to the component so it can be used elsewhere.

2. Pass arbitrary data to the context prop

Any data passed to the context prop will be passed to all Slices. How the data is used and how it is shaped is totally up to you depending on how you need to use it. One example is providing an object keyed by the Slice type that needs the data. This organizes data in a scalable way.

<SliceZone
  slices={doc.data.body}
  components={{
    text: ({ slice, ...props }) => (
      <TextSlice theme={slice.primary.theme} slice={slice} {...props} />
    ),
    images: ImagesSlice,
  }}
  context={{
    text: {
      myCustomData: "hello!",
    }
  }}
/>

If this custom data is only used in one or a few Slices, consider using the first method (“Treat React components as functions”) and pass the data directly to the component.

If you need this custom data in all Slices, then use the context prop.

[angeloashmore]

Great! Happy to hear it was helpful.

I’m going to close this feature request as I believe it has already been addressed. If you have any additional feedback or thoughts, please feel free to comment here and we can continue the discussion.

Thanks!