How to override default slot contents?

Developer Support
1

Q: Once you convert something to a Slot, it seems like there is no way to fine tune the contents of that Slot via code, only completely override the contents, right?

I’m trying to understand the ideal way to create a “generic wrapping component” (like a Card) while allowing the instanced contents to be tweaked via code overrides. How would you go about this? Thanks!

2

Hi @robust_koi,
I try to explain it via a video. Let me know if that helps
https://www.loom.com/share/9eb26cffb73f45c6b2a23bbbe328294e

3

There are alternative ways to solve this problem but it really depends upon the complexity of the slot component.
Let’s say you don’t want to provide a unique names to the slot component. We can add some logic to the Card component which will inject the props in the slot component.

Inside the Card wrapper component,

  1. We add an extra childrenProps prop
  2. We inject those props to children element via React.cloneElement
function Card_({ children, childrenProps, ...prop }, ref) {
  return (
    <PlasmicCard
      root={{
        wrapChildren: (children) => {
          React.isValidElement(children)
            ? React.cloneElement(children, { ...childrenProps })
            : null;
        },
      }}
      {...props}
    />
  );
}
  1. You can now pass props to children slot as follow
Card={{
 childrenProps: {
   color: "red"
 }
}}
  1. If you want to provide some static value to childrenProps from the Plasmic Studio, you can create a meta prop of type object with the same name childrenProps on Card component.
4

This is a great demo and explanation. Thank you so much.

I tried according to your video demo, and it worked the way I hoped. However it looks like it only functions if the named slot contents is a Component. If you try the same thing with a simple Text element (a named “div”), the API doesn’t pick it up. Is that true for you as well?

5

Oh, It only picks them up if there are multiple elements in the Slot.

6

Single elements should work fine as well, considering the fact that they are having unique names.

7

image.png

image.png

8

image.png
image.png1412×654 37.5 KB

9

Yeah, I must be doing something wrong. They only appear in the API when I add a second item into the slot:

image.png
image.png1372×866 90.5 KB

10

Hmm, have you tried refreshing the API explorer after changes?

Or may be just give it a try in the directly in the codebase.

11

Yep, I’ve been refreshing and trying in the code view, and in my synced project. I’ll keep trying, maybe with an entirely new project. Will let you know if I narrow it down.

12

Ok, I narrowed down the issue. This may be obvious or intentional but it sure confused me!

If you create a Slot target from a Text element (not a Stack or other container) and then you place a single named Text area in that slot, it won’t appear in the API.

If your Slot was created from a container (like a Stack), or you place multiple elements inside it, you won’t have this issue. All named Slot contents will all appear in the API.

13

Interesting!
May be Plasmic team can share better insights on this. Either it’s expected behavior or a bug.

14

Yep! Thanks for you help Asim.