FluxibleComponent #

import { FluxibleComponent } from 'fluxible-addons-react;

The FluxibleComponent is a wrapper component that will provide all of its children with access to the Fluxible component context. This should be used to wrap your top level component. It provides access to the methods on the component context.

You can get access to these methods by using useFluxible hook or withFluxible higher-order component.

Usage #

If you have a component that needs access to the ComponentContext methods:

const Component = () => {
   const context = useFluxible();
   const onClick = () => context.executeAction(myAction);

   return <button onClick={onClick} />
};

You can wrap the component with FluxibleComponent to provide the Fluxible component context:

const html = ReactDOM.renderToString(
  <FluxibleComponent context={context.getComponentContext()}>
    <Component />
  </FluxibleComponent>
);

If you are using createElementWithContext this will happen for you automatically:

const html = ReactDOM.renderToString(createElementWithContext(context));