Skip to main content

Hooks

useNavigation​

Allows navigating when we are inside a Page loader, or it can be simply used to know if the component is inside a Page loader

useStudioPanel​

A hook that provides state information and actions for managing the studio panel in a web form editor. The studio panel represents a dynamic side panel that displays information related to the selected element or component.

Returns​

`{StudioPanelReturnType} - An object containing the type, open state, current state, and actions to manipulate the studio panel.

info

The useStudioPanel function returns an object with properties type, isOpen, current, and actions to manipulate the studio panel state.

The actions object includes methods for updating the state, setting the current type and value, closing, opening, and opening with a specific type and current value.

useRenderer​

A hook that facilitates rendering and event handling for a Craft.js node. It manages server-side references (ssRef) and auto-binds events to the corresponding DOM element.

Parameters​

paramdescription
autoBindEventsSpecifies whether events should be auto-bound.
omittedEventsAn array of event names to be omitted.

Returns​

`{[HTMLElement | null, { connectRenderer, eventsToHandle, emit} ] } - An object with methods for connecting, handling events, and emitting custom events.

info

The useRenderer function returns a tuple with two elements:

  • HTMLElement | null: The current DOM element or null. This represents the element to which the renderer is currently connected.

  • An object providing methods to:

  • Connect the renderer

  • eventsToHandle: An object mapping event names to their corresponding handler functions.

  • emit: A function to emit a custom event with the specified name and payload.

useLayout​

A hook that provides methods and properties related to the layout mode of a Page.

Returns​

`{LayoutReturnType} - An object containing properties and methods related to the layout mode.

info

The useLayout function returns an object with properties layout and isAiryMode, along with methods getClassName and toggle.

Basic usage:

import { useLayout } from "@ws-ui/webform-editor";

const Example = () => {
highlight-next-line
const { layout, isAiryMode, getClassName } = useLayout();

return (
    <div>
       <p>Current Layout: {layout}</p>
       <p>Is Airy Mode: {isAiryMode ? 'Yes' : 'No'}</p>
       <p>Modified Class Name: {getClassName('my-container')}</p>
    </div>
);
}

useDatasourceSub​

A hook that subscribes to changes in datasources and performs replacements in the webform based on specified actions.

import useDatasourceSub from "@ws-ui/webform-editor"

const ExampleComponent = () => {
highlight-next-line
useDatasourceSub();
};

useSources​

A hook that facilitates managing datasources and current elements associated with a web form. It provides methods for setting, fetching, and listening to changes in datasource values.

Parameters​

paramdescription
optionsUseSourcesOptions An object allowing configuration of the hook behavior. Includes options such as datasourceChange, currentElementChange and acceptIteratorSel.

Returns​

`{UseSourcesReturnType} - An object containing datasources, current elements, and methods for manipulating their values.

info

The useSources function returns an object with the following structure:

useEnhancedNode​

A hook that enhances the functionality of a Craft.js node, providing features for handling data transfer, managing datasources, and styling components.

Parameters​

paramdescription
collector(optional) (args: Node) => K
options(optional) { stopPropagation?: (data: IDataTransfer) => boolean; onDrop?: (e: any) => void; }

Returns​

{UseEnhancedNodeReturnType} - An object containing enhanced node information, connectors, and actions.

Basic usage:

import { useEnhancedNode } from '@ws-ui/webform-editor';
import { useState, useEffect } from 'react';

const ExampleDelayedState = () => {
  const { actions, connectors, linkedNodes } = useEnhancedNode((node) => ({
    nodes: node.data.nodes,
    linkedNodes: node.data.linkedNodes,
    node,
  }));

  const [delayedState, setDelayedState] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      // Fetch your data, e.g., from an API
      const result = await fetch('https://api.example.com/data');
      const data = await result.json();

      setDelayedState(data);

      actions.setDatasourceValue({ key: 'yourDatasourceKey', value: data });
    };

    fetchData();
  }, [actions]);

  return (
    <div ref={connectors.connect}>

      {delayedState && (
        <div>
          {JSON.stringify(delayedState)}
        </div>
      )}
    </div>
  );
};
info

The useEnhancedNode function returns an object with the following structure:

  • id: The ID of the node.
  • store: The store associated with the node.
  • connectors: Object containing connectors to interact with the Craft.js editor.
  • ...collected: Additional data collected by the collector function.
  • actions: An object containing methods for manipulating node values, including setProp, setStyle, setDatasource, and setIterator.

useEnhancedEditor​

A Hook that provides methods and state information associated with the entire editor.

Parameters​

paramdescription
collectA function that collects relevant state information from the editor state. The component will re-render when the values returned by this function changes.

Returns​

{useEditorReturnType<S>}

Basic usage:

import { useEnhancedEditor } from "@ws-ui/webform-editor";

const BasicUsageExample = () => {
const { isActive, enabled, canvas } = useEnhancedEditor();

 // Your component logic based on the editor state
 return (
   <div>
    <p>Is Active: {isActive ? 'Yes' : 'No'}</p>
    <p>Editor Enabled: {enabled ? 'Yes' : 'No'}</p>
    <p>Canvas Element: {canvas}</p>

   // Additional logic and components based on the editor state
    </div>
    );
  };

useDataLoader​

Returns an easy to use API to fecth a page(s) of data

Parameters​

paramdescription
propsAn object containing source i.e the datasource and the initial step

Returns​

{page: IPage; entities: datasources.IEntity[]; setStep: (step: IStep) => void; fetchIndex: (index: number) => void; } - DataLoader return type

This example is using useSource and useDataloader to fetch simple list of people with firstName and lastName

import {
  useDataLoader,
  useSources,
} from "@ws-ui/webform-editor";
import { FC } from "react";

type Person = {
 firstName: string;
 lastName: string;
 id: string
}

const Example: FC = () => {
  const {
    sources: { datasource: ds },
  } = useSources();
  const { entities } = useDataLoader<Person>({
    source: ds,
  });

  // assuming that the source has two attributes firstName and lastName
  return (
      <div className="flex">
        {entities.map((entity, index) => (
          <div key={entity.id} className="flex items-center">
              <span>{entity.firstName}</span> -
              <span>{entity.lastName}</span>
          </div>
        ))}
      </div>
  );
};

export default Example;

useEntity​

Gets current entity context from parant Element

Returns​

{EntityContextType} - Entity information including index, selection, current, iterator and parent