Skip to content

mediamonks/react-kit

Folders and files

NameName
Last commit message
Last commit date

Latest commit

e39e38a · May 3, 2024
Feb 23, 2024
Dec 21, 2022
Feb 23, 2024
Nov 3, 2023
Nov 10, 2023
Feb 23, 2024
Nov 30, 2022
Feb 23, 2024
Nov 10, 2023
Nov 10, 2023
Nov 10, 2023
Nov 10, 2023
Nov 30, 2022
Nov 10, 2023
Nov 10, 2023
May 31, 2023
May 3, 2024
May 3, 2024
Nov 10, 2023
Nov 10, 2023
May 31, 2023
May 22, 2023
May 22, 2023

Repository files navigation

npm version npm downloads

@mediamonks/react-kit

Collection of commonly used React hooks.

Getting started

Installing

Add @mediamonks/react-kit to your project:

npm i @mediamonks/react-kit

Example

Use a hook inside a component:

import { useToggle } from '@mediamonks/react-kit';

function DemoComponent() {
  const [state, toggle] = useToggle(false);

  return (
    <div>
      <div>{state} </div>
      <button onClick={() => toggle()}>Toggle</button>
    </div>
  );
}

Docs

https://mediamonks.github.io/react-kit/

Development

The information below should help you develop new hooks in this library.

Run npm run test -- --watch to run all unit tests in watch mode.

Run npm run storybook to preview your stories and documentation.

Folder Structure

useHookName

  • useHookName.ts – The Hook itself
  • useHookName.stories.tsx – To showcase the hook with a working UI, also used for dom testing
  • useHookName.stories.mdx – Documentation about the hook
  • useHookName.test.tsx – Unit tests for the hook

Steps for adding a new Hook:

Run the plop script and enter your hook name starting with use.

npm run plop

Which will execute the following steps, where you need to fill in the content.

  • Create a new folder and a new ts file with the hook
    • Use the use prefix for the name of the hook
    • Use named exports to export the hook
    • Enter JSDoc for description and parameters
  • Re-export the hook in the index.ts
  • Add a markdown file documenting the hook
    • General description
    • Reference for types, parameters, return type
    • Simple and extended use cases
  • Add a story file to test out the hook
    • Add an instructions banner at the top of the story
    • Create a type for the StoryArgs that match the template, so it can be used when rendering the Story inside tests.
  • Add unit tests for the hook

Writing Unit test

Hooks can be tested using the renderHook function that now exists in @testing-library/react.

At the time of writing, this method is undocumented. It can be used as follows:

import { renderHook } from '@testing-library/react';

// init the hook
const { result, rerender, unmount } = renderHook(useToggle, {
  // values passed to your hook
  initialProps: { foo: 'bar' },
});

// inspect the response of the hook
console.log(result.current);

Run Component Lifecycle

To interact with your hook, you must use the act function.

import { act, renderHook } from '@testing-library/react';

// init the hook
const { result, rerender, unmount } = renderHook(useToggle, {
  // values passed to your hook
  initialProps: { foo: 'bar' },
});

// inspect the response of the hook
console.log(result.current);

act(() => {
  // interact with your hook
  result.current[1]();
});

// inspect the updated value of the hook
console.log(result.current);