Skip to content

Commit

Permalink
Quality of Life Updates (#17)
Browse files Browse the repository at this point in the history
* Update

* Revert

* A lot

* Fix
  • Loading branch information
PauloMFJ authored Jan 30, 2024
1 parent 714f680 commit dd0be29
Show file tree
Hide file tree
Showing 11 changed files with 28,827 additions and 28,120 deletions.
2 changes: 1 addition & 1 deletion .github/CODEOWNERS
Validating CODEOWNERS rules …
Original file line number Diff line number Diff line change
@@ -1 +1 @@
* @paulomfj @maikelvdzande
* @paulomfj @maikelvdzande @maartenbruggink
1 change: 1 addition & 0 deletions .prettierrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("@buildinams/lint/prettier");
24 changes: 20 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -46,21 +46,22 @@ const MyComponent = () => {

## Using 'defaultValue'

If you want to provide a default value for the initial render (and in server), you can pass it as `defaultValue` within the _optional_ config object.
If you want to provide a default value for the initial render (and in server), you can pass it as `defaultValue` within the _optional_ config object. This accepts `boolean`, `undefined`, or `null`. For example:

```tsx
import useMatchMedia from "@buildinams/use-match-media";

const MyComponent = () => {
const isMobile = useMatchMedia("(max-width: 768px)", { defaultValue: true });
const isSmall = useMatchMedia("(max-width: 768px)", { defaultValue: true });
...
};
```

Couple things to **note**:

- The default value will only be used on the initial render and SSR. By the second render, the hook will use the actual value matched.
- If left `undefined`, the default value will be `false`.
- If theres already a match for the query, the hook will use the actual value matched instead of the default value.
- If left blank, the default value will be `false`.

## Conditionally Listening to Events

Expand All @@ -72,11 +73,26 @@ import useMatchMedia from "@buildinams/use-match-media";
const MyComponent = () => {
const [isEnabled, setIsEnabled] = useState(false);

const isMobile = useMatchMedia("(max-width: 768px)", { isEnabled });
const isSmall = useMatchMedia("(max-width: 768px)", { isEnabled });
...
};
```

## Using Layout Effect

By default, the hook will use `useEffect` to listen to events. However, you can use `useLayoutEffect` instead by passing `layoutEffect` in the config object. For example:

```tsx
import useMatchMedia from "@buildinams/use-match-media";

const MyComponent = () => {
const isSmall = useMatchMedia("(max-width: 768px)", { layoutEffect: true });
...
};
```

This is SSR safe, and will only use `useLayoutEffect` on the client.

## Requirements

This library requires a minimum React version of `17.0.0`.
Expand Down
6 changes: 3 additions & 3 deletions jest.config.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type { Config } from "@jest/types";

const config: Config.InitialOptions = {
verbose: true,
testEnvironment: "jsdom",
roots: ["<rootDir>/tests"],
verbose: true,
testEnvironment: "jsdom",
roots: ["<rootDir>/tests"],
};

export default config;
Loading

0 comments on commit dd0be29

Please sign in to comment.