Initial release

.eslintrc

@@ -0,0 +1,6 @@
+{
+    "extends": "@dtrw/eslint-config/eslint-config-base",
+    "parserOptions": {
+        "project": "./tsconfig.json"
+    }
+}

.github/workflows/make-release.yml

@@ -0,0 +1,44 @@
+name: 'Make github and npm releases'
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  make-release:
+    name: 'Make github and npm releases'
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: 'Checkout source code'
+        uses: 'actions/checkout@v2'
+        with:
+          ref: ${{ github.ref }}
+      - name: 'Setup node'
+        uses: actions/setup-node@v2
+        with:
+          node-version: '12.x'
+          registry-url: 'https://registry.npmjs.org'
+          scope: '@dtrw'
+      - name: 'Build'
+        run: |
+          yarn
+          yarn build
+      - name: 'Create a github release'
+        uses: "marvinpinto/action-automatic-releases@latest"
+        with:
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          prerelease: false
+          automatic_release_tag: "${{ github.ref_name }}"
+          title: "${{ github.ref_name }}"
+          files: |
+            LICENSE
+            README.md
+            package.json
+            yarn.lock
+            bin
+      - name: 'Publish package'
+        run: yarn publish --tag latest --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+bin/

.markdownlint.json

@@ -0,0 +1,53 @@
+{
+    "MD001": true,
+    "MD003": {
+        "style": "atx"
+    },
+    "MD004": {
+        "style": "sublist"
+    },
+    "MD005": true,
+    "MD007": true,
+    "MD010": true,
+    "MD011": true,
+    "MD012": true,
+    "MD013": false,
+    "MD018": true,
+    "MD019": true,
+    "MD022": true,
+    "MD023": true,
+    "MD024": {
+        "siblings_only": true
+    },
+    "MD025": true,
+    "MD026": true,
+    "MD027": true,
+    "MD028": true,
+    "MD029": true,
+    "MD030": true,
+    "MD031": true,
+    "MD032": true,
+    "MD033": {
+        "allowed_elements": [
+            "table", "thead", "tbody", "tr", "th", "td",
+            "style", "code", "b", "i", "u", "br"
+        ]
+    },
+    "MD034": true,
+    "MD035": true,
+    "MD036": true,
+    "MD037": true,
+    "MD038": true,
+    "MD039": true,
+    "MD040": true,
+    "MD041": true,
+    "MD042": true,
+    "MD045": true,
+    "MD046 ": {
+        "style": "fenced"
+    },
+    "MD047": true,
+    "MD048 ": {
+        "style": "backtick"
+    }
+}

.npmignore

@@ -0,0 +1,2 @@
+/node_modules
+/src

README.md

@@ -0,0 +1,132 @@
+# @dtrw/react-utils
+
+![npm version](https://badge.fury.io/js/@dtrw%2Freact-utils.svg)
+![NPM License](https://img.shields.io/npm/l/@dtrw/react-utils)
+
+This is repository with some react utils (just hooks for now) that are used (or will be used) in my other projects, but can also be used by anyone
+
+- [Install](#install)
+- [Usage](#usage)
+  + [`useArray`](#-usearray-)
+  + [`useObject`](#-useobject-)
+
+## Install
+
+```bash
+yarn add -D @dtrw/react-utils
+```
+
+or
+
+```bash
+npm i -D @dtrw/react-utils
+```
+
+## Usage
+
+### `useArray`
+
+This hook aims to achieve two goals:
+
+- allows using arrays in `useMemo`/`useCallback`/`useEffect`-like hooks and make sure they won't rerun if arrays don't actually change
+- allows using arrays in above mentioned hooks' dependency arrays just like that (without spread workarounds etc) without triggering [`eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks)' `exhaustive-deps` rule
+
+```ts
+function useArray<T>(
+    data: T[], // array of interest
+    isEqual?: (prev: T, current: T) => boolean // method for deep-checking if any of elements changed or not
+): T[];
+```
+
+`isEqual` defaults to reference `===` check. If provided, will be called for each pair of previous' and current's arrays' elements ONLY IF those arrays are not the same reference and are of same length.
+
+Example:
+
+```tsx
+import { useMemo } from 'react';
+import { useArray } from '@dtrw/react-utils';
+
+function Component({ data }: Props) {
+    const memoedData = useArray(data);
+
+    // useMemo won't re-calculate until `data`'s contents actually changes
+    const rendered = useMemo(() => memoedData.map(renderElement), [memoedData]);
+
+    return <>{rendered}</>
+}
+function Component2({ data }: Props) {
+    const memoedData = useArray(data);
+
+    // SomeComponent won't rerender until `data`'s contents actually changes
+    return <SomeComponent data={memoedData} />
+}
+```
+
+### `useObject`
+
+This hook allows using object in `useMemo`/`useCallback`/`useEffect`-like hooks while making sure they won't rerun unless the object's content actually changes
+
+```ts
+function useObject<T>(
+    object: T, // object of interest
+    isEqual?: (prev: T, current: T) => boolean // method for deep-checking if object actually changed
+): T[];
+```
+
+`isEqual` defaults to reference `===` check. If provided, will be called on each render ONLY IF current reference differs from previous one. If it returns true, the previous reference will be returned. If not provided, `useObject` becomes a no-op.
+
+Example:
+
+```tsx
+import { useMemo } from 'react';
+import { useObject } from '@dtrw/react-utils';
+
+function Component() {
+    const date = useObject(new Date(), (oldDate, nowDate) => oldDate.getFullYear() === nowDate.getFullYear());
+
+    const rendered = useEffect(() => alert('Year changed to ' + date.getFullYear()), [date]);
+
+    return <div />
+}
+```
+
+### `useToggle`
+
+This hook is a wrapper on `boolean` `useState` that also returns a method for toggling the state
+
+Usage:
+
+```tsx
+import { useToggle } from '@dtrw/react-utils';
+
+// state and setState come directly from `useState`
+const [state, toggle, setState] = useToggle(true) // accepts boolean initialState
+// or
+const [state, toggle, setState] = useToggle() // defaults to false
+```
+
+### `usePrevious`
+
+This hook remembers it's argument's value from previous render
+
+Usage:
+
+```tsx
+import { usePrevious } from '@dtrw/react-utils';
+
+const previous = usePrevious(current)
+```
+
+Example of return values:
+
+render | argument value | return value
+------:|----------------|--------------
+\#0 | `1` | `undefined`
+\#1 | `2` | `1`
+\#2 | `2` | `2`
+\#3 | `'abc'` | `2`
+\#4 | `null` | `'abc'`
+\#5 | `null` | `null`
+\#6 | `1` | `null`
+
+etc...

jest.config.js

@@ -0,0 +1,5 @@
+/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+module.exports = {
+    preset: 'ts-jest',
+    testEnvironment: 'jest-environment-jsdom'
+};

package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@dtrw/react-utils",
+  "version": "0.0.0",
+  "description": "Collection of react utils",
+  "main": "bin/lib/index.js",
+  "module": "bin/esm/index.js",
+  "types": "bin/types/index.d.ts",
+  "author": "Bartosz Dotryw <burtekdotryw@gmail.com>",
+  "license": "MIT",
+  "private": false,
+  "dependencies": {},
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@dtrw/eslint-config": "^1.2.2",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@testing-library/react": "^12.1.2",
+    "@testing-library/react-hooks": "^7.0.2",
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.34",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.1",
+    "eslint": "^8.2.0",
+    "jest": "^27.3.1",
+    "react": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "rollup": "^2.60.0",
+    "rollup-plugin-dts": "^4.0.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-ts": "^1.4.7",
+    "ts-jest": "^27.0.7",
+    "typescript": "^4.4.4"
+  },
+  "scripts": {
+    "build": "rollup --config",
+    "test": "jest",
+    "test:watch": "jest --watch"
+  }
+}

rollup.config.js

@@ -0,0 +1,36 @@
+import commonjs from '@rollup/plugin-commonjs';
+import { dirname } from 'path';
+import dts from 'rollup-plugin-dts';
+import peerDepsExternal from 'rollup-plugin-peer-deps-external';
+import ts from 'rollup-plugin-ts';
+import * as pkg from './package.json';
+
+const baseConfig = {
+    input: 'src/index.ts',
+    preserveModules: true
+};
+
+export default [{
+    ...baseConfig,
+    output: [{
+        dir: dirname(pkg.main),
+        format: 'cjs',
+        sourcemap: 'inline'
+    }, {
+        dir: dirname(pkg.module),
+        format: 'esm',
+        sourcemap: 'inline'
+    }],
+    plugins: [
+        peerDepsExternal(), // React
+        ts(),
+        commonjs()
+    ]
+}, {
+    ...baseConfig,
+    output: {
+        dir: dirname(pkg.types),
+        format: 'esm'
+    },
+    plugins: [dts()]
+}];

src/hooks/index.ts

@@ -0,0 +1,4 @@
+export { useArray } from './useArray';
+export { useObject } from './useObject';
+export { usePrevious } from './usePrevious';
+export { useToggle } from './useToggle';