@kodingdotninja/use-toggle/dist/index.d.ts

Toggle custom hook and component wrapper for React 🔦

import * as react from 'react';
import { ReactNode } from 'react';

interface ClientOnlyProps {
    children: ReactNode;
}
/**
 * Same as `<ToggleWrap enableOnMount />`, usually used on client-side only components.Same as `<ToggleWrap enableOnMount initialState={false} />`, usually used on client-side only components.
 *
 * ---
 *
 * @example
 *
 * ```jsx
 * <ClientOnly>
 *   <div>...</div>
 * </ClientOnly>
 * ```
 */
declare function ClientOnly({ children }: ClientOnlyProps): react.JSX.Element;

type UseToggleReturnType = {
    state: boolean;
    disable: () => void;
    enable: () => void;
    set: (newState: boolean) => void;
    toggle: () => void;
};
type UseToggleType = (initialState?: boolean) => UseToggleReturnType;
/**
 * Toggle hook which accepts initial state and returns the toggle state and controls.
 *
 * ---
 *
 * @param initalState Initial value for toggle hook
 *
 * @returns Toggle value and controls
 *
 * @example
 *
 * ```jsx
 * const { state, disable, enable, set, toggle } = useToggle(initalState);
 * ```
 */
declare const useToggle: UseToggleType;

declare const ENABLE_ON_MOUNT_KEY = "enableOnMount";
declare const DISABLE_ON_MOUNT_KEY = "disableOnMount";
/**
 * Toggle wrap props for determining if toggle should be enabled or disabled on mount.
 */
type OnMountProps = {
    [ENABLE_ON_MOUNT_KEY]?: boolean;
} | {
    [DISABLE_ON_MOUNT_KEY]?: boolean;
};
type ToggleWrapProps = OnMountProps & {
    initialState?: boolean;
    children: (toggle: UseToggleReturnType) => ReactNode;
};
type ToggleWrapType = (props: ToggleWrapProps) => JSX.Element;
/**
 * Toggle wrap component which accepts initial state and enable/disable on mount prop.
 * Returns a render function to consume the toggle hook.
 *
 * ---
 *
 * @param props Toggle wrap props
 *
 * @returns Render function to consume the toggle hook
 *
 * @example
 *
 * ```jsx
 * <ToggleWrap>
 *    {({ state, disable, enable, set, toggle }) => (
 *      <div>...</div>
 *    )}
 *  </ToggleWrap>
 * ```
 */
declare const ToggleWrap: ToggleWrapType;

export { ClientOnly, type ClientOnlyProps, DISABLE_ON_MOUNT_KEY, ENABLE_ON_MOUNT_KEY, type OnMountProps, ToggleWrap, type ToggleWrapProps, type ToggleWrapType, type UseToggleReturnType, type UseToggleType, useToggle };