How to use the constate function in constate

To help you get started, we’ve selected a few constate examples, based on popular ways it is used in public projects.

github elastic / kibana / x-pack / legacy / plugins / infra / public / pages / logs / log_entry_rate / use_log_entry_rate_module.tsx View on Github external
() => ({
      indices: indexPattern.split(','),
      sourceId,
      spaceId,
      timestampField,
    }),
    [indexPattern, sourceId, spaceId, timestampField]
  );

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

export const [LogEntryRateModuleProvider, useLogEntryRateModuleContext] = createContainer(
  useLogEntryRateModule
);
github diegohaz / constate / examples / wizard-form / App.js View on Github external
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,
github elastic / kibana / x-pack / legacy / plugins / epm / public / hooks / use_package_install.tsx View on Github external
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
);
github Swizec / threadcompiler.com / src / state.js View on Github external
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 }
github kyma-project / website / src / components / generic-documentation / services / TabState.service.ts View on Github external
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 };
github kyma-project / console / add-ons / src / services / Labels.service.ts View on Github external
useEffect(() => {
    if (originalConfigs) {
      setUniqueLabels(
        sortLabels(getUniqueLabels(getFiltersLabels(originalConfigs))),
      );
    }
  }, [originalConfigs]);

  return {
    uniqueLabels,
    validateLabel,
  };
};

const { Provider, Context } = createContainer(useLabels);
export { Provider as LabelsProvider, Context as LabelsService };
github elastic / kibana / x-pack / legacy / plugins / infra / public / containers / logs / log_analysis / log_analysis_capabilities.tsx View on Github external
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,
github chakra-ui / chakra-ui / packages / hooks / src / useTabs / useTabs.tsx View on Github external
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,
github kyma-project / website / src / root / services / root.ts View on Github external
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 };
github diegohaz / constate / examples / wizard-form / App.js View on Github external
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 {

constate

Yet another React state management library that lets you work with local state and scale up to global state with ease

MIT
Latest version published 5 months ago

Package Health Score

72 / 100
Full package analysis

Popular constate functions

Similar packages