initial commit

Author: Patrick Tran

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+  "extends": [
+   "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"],
+        "moduleDirectory": ["node_modules", "src/"]
+      }
+    }
+  }
+}

.gitignore

@@ -0,0 +1,51 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# generate output
+dist
+
+# vscode custom settings
+.vscode

.npmignore

@@ -0,0 +1,7 @@
+dist
+.babelrc
+.storybook
+.gitignore
+.prettierrc
+rollup.config.js
+tsconfig.json

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 85,
+  "tabWidth": 2,
+  "endOfLine": "auto"
+}

README.md

@@ -0,0 +1,73 @@
+# React - Use Scroll to Element Hook
+
+> React hook for scrolling to elements on the same page (Anchor Link)
+
+<br/>
+
+[![NPM](https://img.shields.io/npm/v/react-use-scroll-to-element-hook.svg)](https://www.npmjs.com/package/react-use-scroll-to-element-hook) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+<br/>
+
+## Installation
+
+This module is distributed via npm which is bundled with node and
+should be installed as one of your project's dependencies:
+
+```shell
+npm install --save react-use-scroll-to-element-hook
+```
+
+<br/>
+
+## Demo
+
+> ### [https://codesandbox.io/s/react-use-scoll-to-element-hook-example-1kids](https://codesandbox.io/s/react-use-scoll-to-element-hook-example-1kids)
+
+<br/>
+<br/>
+
+<img src="react-scroll-to-element-hook.gif" alt="react-scroll-to-element-hook" style="width:600px;"/>
+
+<br/>
+<br/>
+
+## Usage
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { useScrollToElement } from 'react-use-scroll-to-element-hook';
+
+function MyComponent() {
+  // some code...
+
+  const FAQS = [
+    {
+      name: 'Question 1',
+      answer: 'Lorem ipsum',
+    },
+    {
+      name: 'Question 2',
+      Ananswerswer: 'Pretium fusce id ',
+    },
+    {
+      name: 'Question 3',
+      answer: 'Dolor sit amet',
+    },
+  ];
+
+  const faqNames = FAQS.map(faq => faq.name);
+
+  //Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
+  const scrollIntoViewOptions = {
+    behavior: 'auto';
+  }
+
+  const { getScrollToElementRef, scrollToElementClickHandler } = useScrollToElement(
+    faqNames, //array of strings
+    scrollIntoViewOptions //this is optional - behavior: smooth is used by default
+  );
+
+  return <div>{/* render FAQ with Anchor links here - see CodeSandBox demo */}</div>;
+}
+```