(using codegen)
I would like to get the name of a current variant.
From inside that component a hook would be nice.
But it would be even more convenient (in my case) to get it from inside the parent component.
Hello @still_peacock. From the parent component, can you use the props that you’re passing to the child?
no I don’t think so.
let me show you what I’m trying to achieve:
https://www.awesomescreenshot.com/video/9199714?key=1ba262ddc9204a7dfbcc3bc82881f32e
We export some of the types that are used in the variants.
For example
Plasmic{ComponentName}__VariantMembers["variantName"]
will return all the available values for the variantName .
Does this help your use case or do you need the current active one?
there are multiple elements in the component which are sourceCategoryButtons
when any one of them get’s clicked, I want to know its current variant from a single-select variant group
In my case, the sourceCategoryButton component also has a „title” element which also has the same string as the value of of the variant.
So that would be available for a workaround.
But since variants can be an essential part of an applications state I think their values should ideally be easily retrievable even from the parent level.
(Most of the time, variants are on the receiving end of state transitions. But they can also be needed to initiate stuff. In my case I actually have the sourceCategories in my database.
But when the component is first created, we don’t know its sourceCategory until after one of the sourceCategoryButtons was selected.)
That’s why I posted this under ideas.
Can you pass an onClick() handler to each sourceCategoryButton that changes the state of the parent component with the current active variant?
Maybe. Then I would need to get the variant name from inside the sourceCategoryButton.
But the jobs of handleShowSubCategories() are related to the parent.
You know what would be cool?
If Plasmic components came with a state machine. Which can tell you about currently active variants and also has state transitions defined (in the studio). Probably too much, but it would be nice.
I tried getting the title of the button via the passed event:
const handleShowSubCategories = (e: React.MouseEvent<HTMLDivElement>) => {
console.log("e.taget", e.target)
}
But I’m not able to set the onClick: function.
Most of those buttons are called (inside the studio): sourceCategoryButton
Ideally I would trigger an event on all of them:
sourceCategoryButton={{
onClick: handleShowSubCategories
}}
but sourceCategoryButton is not exported and accepted as a prop.
If I name some of them, they each get exported.
But a) there are lots of buttons and it would not be sexy to give each their own click handler.
And b) Typescript doesn’t let me add a onClick like this:
scbYoutubeChannels={{
onClick: handleShowSubCategories
}}
For b), you need to go to the SourceCategoryButton file and add the onClick there first in the component props, then typescript won’t complain about it.
could you show an example please?
Sorry for the delay! I didn’t see your message. Do you still need help with the onClick?
no, I solved that by importing a function from a store I use to hold client site state für multiple components.
And that function is sending an event with a payload to a state machine.
If you’re interested, I just recorded a video, where I try to give a brief overview of the state machine:
https://www.awesomescreenshot.com/video/9325157?key=578b2d8499218a26022f7b93557b4a80
I also talk about valtio, which is the lib I use for the store.
Valtio is incredibly useful, especially in this case, where I don’t have any other way to pass down something to every sourceCategoryButton (because there is not one prop that represents all the elements that are sourceCategoryButtons).