Skip to main content

api.getReactiveState()

Description​

Gets an object with the reactive properties of File Manager

This method allows you to subscribe to the returned properties in the same way as actions. In the React edition the returned properties are provided as React state (useState) values/hooks so you can read them and respond to changes using React patterns (useEffect, useMemo, etc.).

Usage​

api.getReactiveState(): object;

Returns​

The method returns an object with the following reactive properties:

{
  data, // an array of objects containing the files structure data
  mode,
  preview,
  search, // the search string 
  panels,
  drive,
  activePanel
}

Each property is exposed as a React state hook value/tuple (see example). In other words, these properties should be treated as React state (useState) values - you can destructure them and use useEffect/useMemo to react to changes.

FIXME: The exact shape of each property (e.g. whether it is returned as a value, a [value, setValue] tuple, or a custom object with subscribe methods) must match the library implementation. The examples below assume a [value, setValue] tuple shape for each property (i.e., mode === [value, setValue]).

All properties description you can find here: File Manager properties overview

Example​

React example (functional component). This example assumes each reactive property returned by api.getReactiveState() is a React state tuple [value, setValue]. Adjust accordingly if the library exposes a different shape.

import { useEffect, useState } from "react";
import { Filemanager } from "@svar-ui/react-filemanager";
import { getData, getDrive } from "./common/data";

function App() {
  // local mirror of the mode value
  const [mode, setMode] = useState();

  // init receives the File Manager API
  function init(api) {
    // Assuming api.getReactiveState().mode is [value, setValue]
    const [apiMode, apiSetMode] = api.getReactiveState().mode;

    // initialize local state with current value
    setMode(apiMode);

    // To keep local state in sync, wrap the API setter to also update local state.
    // NOTE: this is an example pattern - the library may already provide a recommended subscription method.
    // If the library exposes a different subscription model, prefer that one.
    api.getReactiveState().mode[1] = (v) => {
      apiSetMode(v); // update Filemanager's internal state
      setMode(v);    // keep local mirror in sync
    };
  }

  // React to mode changes using useEffect
  useEffect(() => {
    console.log(mode); // outputs mode on every mode change (as long as mode is kept in sync)
  }, [mode]);

  return (
    <Filemanager init={init} data={getData()} drive={getDrive()} />
  );
}

Related articles: