State Between Components in the Specified Configuration

[AFK-Python]

Is there a way to share state between components in the config? Other than abusing dom tricks? Or is the state of each component isolated?

From my understanding, it would likely be the latter, and that makes more sense for what Puck is trying to achieve, but for my use case I would be hoping that there might be a way to share state. Global states would work as well.

[chrisvxd]

Hey @AFK-Python!

You should be able to share state without DOM tricks by using React context, defining a provider using the root configuration. Something like:

import { createContext, useContext, useState } from "react";

const context = createContext({
  counter: 0,
  setCounter: (value: number) => {},
});

const { Provider } = context;

const config = {
  root: {
    render: ({ children }) => {
      const [counter, setCounter] = useState(0);

      return <Provider value={{ counter, setCounter }}>{children}</Provider>;
    },
  },
  components: {
    MyComponent: {
      render: () => {
        const { counter, setCounter } = useContext(context);

        return (
          <>
            <div>Clicked {counter} times</div>
            <button onClick={() => setCounter(counter + 1)}>Click me</button>
          </>
        );
      },
    },
  },
};

Let me know if that works! Going to close the issue.