Need to include any top level store in order parse data from setting.tsx file and index.tsx file of any component.

[ProPhycient5]

Is your feature request related to a problem? Please describe. If you look at this directory (https://github.com/prevwong/craft.js/tree/develop/examples/landing/components/selectors/Button), we have two file index.tsx and ...settings.tsx , it is a very common use case where we need to parse the data (say array, obj, string or boolean data) from ...settings.tsx to index.tsx. In this use case, till now, we have two option which are not standard method. Either use localStorage variable, which can be easily compromised and last way is to use useNode hooks, it's okay to use as long as we are in editor mode, but once we publish our page, it will carry bulky node variable.

Describe the solution you'd like There must be global store like feature we can easily parse data within a Component folder.

I think we must rely on node variable that we create from useNode hook till we are in editor mode.

[prevwong]

Sorry, but I do not understand this feature request. Will need more examples explaining what you mean

[ProPhycient5]

Okay let me explain via gif that I attached below. Below you can see while clicking over Button component, I get the settingsTab on right panel (which currently we have only styleTab on CraftJS example landing page). You can see there are various options of LinkSetting where the user can set. In this use case, we need to parse(or pass )some of the data from ...settings.tsx file to index.tsx file of button component). Here, I was suggesting to add some Redux type feature which CraftJS will provide out of the box.

I hope I made it clear about the feature request. Please comment below whether I am able to convey my suggestion totally.

[ankri]

I, too am not sure what you mean. Are you looking or shared settings for different components?

Or is it that you want to have different settings panels? Then I would suggest putting them in individual components and use them like this:

const ButtonSettings: FunctionComponent = () => {
  return (
    <>
      <EventEditor />
      <LabelEditor />
      <ModifierEditor
        colors={allColors}
        appearances={['raised', 'outline', 'flat', 'text']}
        sizes={['xs', 'sm', 'md', 'lg']}
      />
      <TooltipEditor />
      <IconEditor propName="leftIcon" label="Icon left" />
      <IconEditor propName="rightIcon" label="Icon right" />
    </>
  );
};