Function useGetState

  • useGetState<T>(props): {
        [K in keyof T]: T[K] extends ((...args: any[]) => any)
            ? Awaited<ReturnType<T[K]>> | undefined
            : T[K]
    }

  • Hook that gets and evaluates state-driven values. Handles both static values and async/sync functions that receive state.

    Type Parameters

    • T extends Record<string, any>

    Parameters

    • props: T

      Object containing values that may include state functions

    Returns {
        [K in keyof T]: T[K] extends ((...args: any[]) => any)
            ? Awaited<ReturnType<T[K]>> | undefined
            : T[K]
    }

    Object with evaluated values where state functions have been resolved

    Example

    // Using for all props
    function MyComponent() {
      const evaluatedProps = useGetState({
        title: async (state) => {
          const user = await fetchUser(state.userId);
          return `Welcome, ${user.name}!`;
        },
        subtitle: (state) => `You have ${state.notifications?.length || 0} notifications`,
        isVisible: true, // static value
      });

      return <SomeComponent {...evaluatedProps} />;
    }

    // Using for only some values - single state-driven value
    function PartialUsageComponent() {
      const {title} = useGetState({
        title: async (state) => {
          const data = await api.getData(state.selectedId);
          return data.title;
        },
      });

      return (
        <div>
          <h1>{title}</h1>
          <button onClick={handleClick}>Static Button</button>
          <span className="static-class">Static content</span>
        </div>
      );
    }

    // Combining multiple state values with component props
    function MultipleStateValuesComponent() {
      const stateValues = useGetState({
        userName: (state) => state.currentUser?.name || 'Guest',
        userCount: async (state) => {
          const users = await fetchUsers(state.filters);
          return users.length;
        },
      });

      const staticProps = {
        className: "my-static-class",
        onClick: myStaticHandler,
        variant: "primary"
      };

      return (
        <Card
          title={`Hello, ${stateValues.userName}!`}
          subtitle={`${stateValues.userCount} users online`}
          {...staticProps}
        />
      );
    }

Settings