@skedify/plugin-react

@skedify/plugin-react

Wrapper around the Skedify Plugin, to integrate it more conveniently inside React Applications.

There are 2 exports:

• <SkedifyPlugin configuration={configuration} />: React Component that renders the plugin inside a div. You can pass plugin options to it using the configuration prop. All other props are passed through to the underlying div element.

• <SkedifyPluginProvider value={configuration}>: This is a React Context Provider, that allows you to set certain default values. The interface is the same as the configuration prop.

  This component is not required, but can be useful to populate some shared configuration for each plugin instance, eg:

const defaultConfig = {
  scriptSrc: "https://plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js",
  language: "nl-be",
  flow: "S'TQC",
  meeting_types: "video",
  timezone: "Europe/Brussels",
  oauth: {
    client: "XXX",
  },
  appointment: {
    office_id: "1",
  },
};

function App() {
  return (
    <SkedifyPluginProvider value={defaultConfig}>
      {/* All <SkedifyPlugin /> components will now merge their own passed configuration with the defaultConfig value */}
      <SkedifyPlugin configuration={{ appointment: { subject_id: "1" } }}>
    </SkedifyPluginProvider>
  );
}

The SkedifyPlugin reads the current context value, and merges it with its own passed props.

Required props:

• scriptSrc: The plugin entry point URL. eg: https://plugin.skedify.io/{ENTERPRISE_NAME}/skedify-plugin.js