How to use constate - 10 common examples

() => ({
      indices: indexPattern.split(','),
      sourceId,
      spaceId,
      timestampField,
    }),
    [indexPattern, sourceId, spaceId, timestampField]
  );

  return useLogAnalysisModule({
    moduleDescriptor: logEntryRateModule,
    sourceConfiguration,
  });
};

export const [LogEntryRateModuleProvider, useLogEntryRateModuleContext] = createContainer(
  useLogEntryRateModule
);

import React, { useState, useEffect } from "react";
import constate from "constate";

const [StepProvider, useStepContext] = constate(useStep);
const [FormProvider, useFormContext, useFormValues] = constate(
  useFormState,
  value => value,
  value => value.values
);

function useStep({ initialStep = 0 } = {}) {
  const [step, setStep] = useState(initialStep);
  const next = () => setStep(step + 1);
  const previous = () => setStep(step - 1);
  return { step, next, previous };
}

function useFormState({ initialValues = {} } = {}) {
  const [values, setValues] = useState(initialValues);
  return {
    values,

return {
    packages,
    installPackage,
    setPackageInstallStatus,
    getPackageInstallStatus,
    deletePackage,
  };
}

export const [
  PackageInstallProvider,
  useInstallPackage,
  useSetPackageInstallStatus,
  useGetPackageInstallStatus,
  useDeletePackage,
] = createContainer(
  usePackageInstall,
  value => value.installPackage,
  value => value.setPackageInstallStatus,
  value => value.getPackageInstallStatus,
  value => value.deletePackage
);

import { useState } from 'react'
import createContainer from 'constate'

export function useThreadInput() {
  const [input, setInput] = useState('')
  const [output, setOutput] = useState('')

  const update = event => setInput(event.target.value)

  return { input, update, output, setOutput }
}

const ThreadContainer = createContainer(useThreadInput)

export { ThreadContainer }

import createUseContext from "constate";

export interface TabServiceProps {
  group?: string;
  label?: string;
}

function useTabService({ group, label }: TabServiceProps) {
  return {
    group,
    label,
  };
}

const { Provider, Context } = createUseContext(useTabService);
export { Provider as TabProvider, Context as TabContext };

useEffect(() => {
    if (originalConfigs) {
      setUniqueLabels(
        sortLabels(getUniqueLabels(getFiltersLabels(originalConfigs))),
      );
    }
  }, [originalConfigs]);

  return {
    uniqueLabels,
    validateLabel,
  };
};

const { Provider, Context } = createContainer(useLabels);
export { Provider as LabelsProvider, Context as LabelsService };

useEffect(() => {
    fetchMlCapabilities();
  }, [fetchMlCapabilities]);

  const isLoading = useMemo(() => fetchMlCapabilitiesRequest.state === 'pending', [
    fetchMlCapabilitiesRequest.state,
  ]);

  return {
    hasLogAnalysisCapabilites: mlCapabilities.capabilities.canCreateJob,
    isLoading,
  };
};

export const LogAnalysisCapabilities = createContainer(useLogAnalysisCapabilities);

const initialMlCapabilities = {
  capabilities: {
    canGetJobs: false,
    canCreateJob: false,
    canDeleteJob: false,
    canOpenJob: false,
    canCloseJob: false,
    canForecastJob: false,
    canGetDatafeeds: false,
    canStartStopDatafeed: false,
    canUpdateJob: false,
    canUpdateDatafeed: false,
    canPreviewDatafeed: false,
    canGetCalendars: false,
    canCreateCalendar: false,

id,
    isControlled,
    selectedIndex,
    focusedIndex,
    onChange,
    onFocus,
    isManual,
    orientation,
    tabNodesRef,
    tablistRef,
  };
}

////////////////////////////////////////////////////////////////////////

const [TabsProvider, useTabsContext] = constate(useTabs);
export { TabsProvider };

////////////////////////////////////////////////////////////////////////

export interface UseTabOptions extends TabbableProps {
  id?: string;
  isSelected?: boolean;
  panelId?: string;
}

export function useTab(props: UseTabOptions) {
  const { isSelected, isDisabled, id, panelId, ...rest } = props;

  const tab = useTabbable({
    ...rest,
    clickOnSpace: true,

useEffect(() => {
    if (!window.__GATSBY_ROUTE_UPDATED) {
      setTimeout(() => {
        window.__GATSBY_ROUTE_UPDATED = true;
      }, 25);
    }
  }, [pathname, hash]);

  return {
    language,
    setLanguage,
  };
}

const { Provider, Context } = createUseContext(useRootService);
export { Provider as RootProvider, Context as RootContext };

import React, { useState, useEffect } from "react";
import constate from "constate";

const [StepProvider, useStepContext] = constate(useStep);
const [FormProvider, useFormContext, useFormValues] = constate(
  useFormState,
  value => value,
  value => value.values
);

function useStep({ initialStep = 0 } = {}) {
  const [step, setStep] = useState(initialStep);
  const next = () => setStep(step + 1);
  const previous = () => setStep(step - 1);
  return { step, next, previous };
}

function useFormState({ initialValues = {} } = {}) {
  const [values, setValues] = useState(initialValues);
  return {