Quality of Life Updates (#17)

* Update

* Revert

* A lot

* Fix

Author: PauloMFJ

.github/CODEOWNERS

@@ -1 +1 @@
-* @paulomfj @maikelvdzande
+* @paulomfj @maikelvdzande @maartenbruggink

.prettierrc.js

@@ -0,0 +1 @@
+module.exports = require("@buildinams/lint/prettier");

README.md

@@ -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
 
@@ -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`.

jest.config.ts

@@ -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;