Phoenix React Server - embed react component in server side

Your Libraries & OS Mentoring Libraries
,
1

Run a React render server to render react component as Phoenix Component.

Features

  • Render to static markup
  • Render to string
  • Render to readable stream
  • Hydrate at client side
  • Connect to Live View render
<div
  id="react-live-form"
  class="w-full h-full"
  phx-update="ignore"
  phx-hook="LiveFormHook"
><.react_live_form
  data={@form_data}
/></div>

const hooks = {
  LiveFormHook: {
    mounted() {
      const formState = new FormState();

      formState.setData = (data) => {
        this.pushEvent("form:input", data);
      };

      function LiveViewForm(props) {
        const data = useSyncExternalStore(formState.subscribe, formState.getSnapshot, formState.getServerSnapshot);
        return <LiveForm data={data} setData={formState.setData} />;
      }

      this.pushEvent("form:init", {}, (data, ref) => {
        formState.reset(data);
        this.reactRoot = hydrateRoot(this.el, <LiveViewForm />);
      });
      this.handleEvent("form:update", (data) => {
        formState.assign(data);
      });
    },
  }
}
1 Like