@asmundwien/more-hooks v2.0.2

more-hooks

A collection of usefull hooks that are commonly used in React development.

We take no credits for these components as they are merely a collection of ideas shared accross the community. Thanks for being great!

This library is written with full TypeScript support.

Table of content

• useAsync
• useOnMount
• createDefinedContext

useAsync

This hook is designed to simplify the handling of a asynchronous calls.

Example

import { useAsync } from "@asmundwien/more-hooks";

const App = () => {
  const { pending, error, response, call } = useAsync(someAsyncFunc);
  return (
    <>
      {pending && <LoadingSpinner />}
      {error && <MyError error={error} />}
      {response && <MyData data={response} />}
      <Button onClick={() => call()}>Fetch something</Button>
    </>
  );
};

Input arguments

Types

UseAsyncResponse

UseAsyncOptions

Object containing optional pramaters. | name | type | description | | ------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | | immediate | tuple | A list with the same parameters as the call-method. Will initialize a call when the component mounts. |

useOnMount

This tiny hook will run only during your components first render lifecycle. Remeber componentDidMount()?.

Example

import { useOnMount } from "@asmundwien/more-hooks";

const Component = () => {
  const [text, setText] = useState("");

  const fetch = async () => {
    const response = await myApi();
    setText(response);
  };

  useOnMount(fetch);

  return (
    <>
      {text && <p>Response text: {text}</p>}
      {!text && <Alert>Just mounted anew, hang on...</Alert>}
    </>
  );
};

Input arguments

createDefinedContext

An implementation on top of React Context. It ensures the existance of your ContextProvider and its value. The content of your context can therefore never be undefined.

Example

import { createDefinedContext, useOnMount } from "@asmundwien/more-hooks";

export const [useUserContext, UserProvider] = createDefinedContext<User>();

const UserContext = ({ children }: Props) => {
  const [user, setUser] = useState<User>();
  useOnMount(() => getUser().then(setUser));

  if (!user) {
    return <Loading />;
  }

  return <UserProvider value={user}>{children}</UserProvider>;
};

1. Create a new defined context.
2. Get your data from somewhere, then feed it to your provider. In this example it calls for an async user object.

import { UserContext, UserDetails } from ".";

const App = () => (
  <UserContext>
    <UserDetails />
  </UserContext>
);

Any children of your context will have access to the data in the context provider.

import { useUserContext } from "UserContext";

const UserDetails = () => {
  const { name } = useUserContext();
  return <p>User name: {name}</p>;
};

Finally, access the hook from your DefinedContext.

Input

In a TypeScript-project, a Type-definition is required.

Return

Returns a tuple containing a hook to access your data, and the React Context Provider needed to initialize the context.