feat: add container hook (#340)

* feat: add container hook

* lint

.babelrc.js

@@ -6,6 +6,7 @@ module.exports = (api) => ({
         modules: api.env() === 'esm' ? false : 'commonjs',
       },
     ],
+    '@babel/typescript',
   ],
   plugins: [api.env() !== 'esm' && 'add-module-exports'].filter(Boolean),
 });

.eslintrc.js

@@ -2,8 +2,8 @@ module.exports = {
   extends: [
     '4catalyzer-react',
     '4catalyzer-jest',
+    '4catalyzer-typescript',
     'prettier',
-    'prettier/react',
   ],
   plugins: ['prettier'],
   rules: {

.github/workflows/ci.yml

@@ -0,0 +1,18 @@
+name: Test
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 'lts/*'
+          cache: 'yarn'
+      - run: yarn install --frozen-lockfile
+      - run: yarn test

README.md

@@ -34,6 +34,23 @@ $ npm i -S found-scroll
 
 When constructing a router, in the `render` method, wrap the rendered element with `<ScrollManager>`, and pass in `renderArgs` as a prop, as in the above example.
 
+### Scrollable Containers
+
+Generally only the `window` scroll position is restored for a location. For
+cases where you also want to restore alternative scroll container there is `useScrollContainer`
+
+```jsx
+import { useScrollContainer } from 'found-scroll';
+
+function MyScrollView() {
+  const scrollRef = useScrollContainer('my-scroll-view');
+
+  return <div ref={scrollRef} />;
+}
+```
+
+Scroll containers are identified with a 'scrollKey'. There should only be one element associated with a given key for any given location. Think of it as similar to React's `key` prop, in that it provides a stable identity for an element across renders.
+
 ### Custom scroll behavior
 
 You can provide a custom `shouldUpdateScroll` callback as a prop to `<ScrollManager>`. This callback receives the previous and the current `renderArgs`.

package.json

@@ -10,16 +10,14 @@
   "module": "es/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
-    "build": "4c build --type-dir types",
+    "build": "4c build",
     "lint": "eslint src test",
     "prepublishOnly": "npm run build",
     "testonly": "jest --runInBand --verbose",
     "test": "npm run lint && npm run testonly"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+  "gitHooks": {
+    "pre-commit": "lint-staged"
   },
   "lint-staged": {
     "*.js": "eslint --fix"
@@ -30,6 +28,7 @@
     "trailingComma": "all"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "setupFiles": [
       "<rootDir>/test/setup.js"
     ]
@@ -59,37 +58,38 @@
     "react": "^0.14.9 || >=15.3.0"
   },
   "devDependencies": {
-    "@4c/babel-preset": "^8.0.2",
-    "@4c/cli": "^2.1.11",
-    "@4c/tsconfig": "^0.3.1",
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@typescript-eslint/eslint-plugin": "^4.9.1",
-    "@typescript-eslint/parser": "^4.9.1",
-    "babel-jest": "^26.6.3",
+    "@4c/babel-preset": "^8.1.1",
+    "@4c/cli": "^2.2.8",
+    "@4c/tsconfig": "^0.4.0",
+    "@babel/cli": "^7.14.8",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-typescript": "^7.15.0",
+    "@typescript-eslint/eslint-plugin": "^4.29.1",
+    "@typescript-eslint/parser": "^4.29.1",
+    "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
+    "babel-jest": "^27.0.6",
     "babel-plugin-add-module-exports": "^1.0.4",
     "cpy-cli": "^3.1.1",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.5",
-    "eslint": "^7.15.0",
-    "eslint-config-4catalyzer-jest": "^2.0.10",
-    "eslint-config-4catalyzer-react": "^1.0.13",
-    "eslint-config-4catalyzer-typescript": "^3.0.2",
-    "eslint-config-prettier": "^7.0.0",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jest": "^24.1.3",
+    "eslint": "^7.32.0",
+    "eslint-config-4catalyzer-jest": "^2.1.0",
+    "eslint-config-4catalyzer-react": "^1.1.0",
+    "eslint-config-4catalyzer-typescript": "^3.1.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-import": "^2.24.0",
+    "eslint-plugin-jest": "^24.4.0",
     "eslint-plugin-jsx-a11y": "^6.4.1",
-    "eslint-plugin-prettier": "^3.3.0",
-    "eslint-plugin-react": "^7.21.5",
+    "eslint-plugin-prettier": "^3.4.0",
+    "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "found": "^0.5.9",
-    "husky": "^5.0.9",
-    "jest": "^26.6.3",
-    "lint-staged": "^10.5.3",
-    "prettier": "^2.2.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-test-renderer": "^16.14.0",
-    "typescript": "^4.1.3"
+    "found": "^0.6.0",
+    "hookem": "^1.0.8",
+    "jest": "^27.0.6",
+    "lint-staged": "^11.1.2",
+    "prettier": "^2.3.2",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-test-renderer": "^17.0.2",
+    "typescript": "^4.3.5"
   }
 }