Add demo app

Author: rafgraph

README.md

@@ -1,23 +1,29 @@
 # React Router Hash Link
 
-**_Note that this is for React Router v4/5, for v2/3 see [this solution](https://github.com/rafgraph/react-router-hash-link/tree/react-router-v2/3)._**
+[![npm](https://img.shields.io/npm/dm/react-router-hash-link?label=npm)](https://www.npmjs.com/package/react-router-hash-link) [![npm bundle size (version)](https://img.shields.io/bundlephobia/minzip/react-router-hash-link?color=purple)](https://bundlephobia.com/result?p=react-router-hash-link)
 
-![npm](https://img.shields.io/npm/dm/react-router-hash-link?label=npm)
+This is a solution to [React Router's issue of not scrolling to `#hash-fragments`](https://github.com/reactjs/react-router/issues/394#issuecomment-220221604) when using the `<Link>` component to navigate.
 
-[Demo website](https://react-router-hash-link.rafgraph.dev/) (code on the [`gh-pages` branch](https://github.com/rafgraph/react-router-hash-link/tree/gh-pages))
+When you click on a link created with `react-router-hash-link` it will scroll to the element on the page with the `id` that matches the `#hash-fragment` in the link. This will also work for elements that are created after an asynchronous data load. Note that you must use React Router's `BrowserRouter` for this to work.
 
 ---
 
-This is a solution to [React Router's issue of not scrolling to `#hash-fragments`](https://github.com/reactjs/react-router/issues/394#issuecomment-220221604) when using the `<Link>` component to navigate.
+### [Live demo app for React Router Hash Link](https://react-router-hash-link.rafgraph.dev)
 
-When you click on a link created with `react-router-hash-link` it will scroll to the element on the page with the `id` that matches the `#hash-fragment` in the link. This will also work for elements that are created after an asynchronous data load. Note that you must use React Router's `BrowserRouter` for this to work.
+Code is in the [`/demo`](/demo) folder.
+
+---
+
+## Basics
 
 ```shell
-$ yarn add react-router-hash-link
-# OR
-$ npm install --save react-router-hash-link
+npm install --save react-router-hash-link
 ```
 
+`react-router-dom` is a peer dependency.
+
+---
+
 ### `<HashLink>`
 
 ```javascript
@@ -29,6 +35,8 @@ import { HashLink } from 'react-router-hash-link';
 <HashLink to="/some/path#with-hash-fragment">Link to Hash Fragment</HashLink>
 ```
 
+---
+
 ### `<NavHashLink>`
 
 ```javascript
@@ -46,6 +54,8 @@ import { NavHashLink } from 'react-router-hash-link';
 >Link to Hash Fragment</NavHashLink>
 ```
 
+---
+
 ## Scrolling API
 
 ### `smooth: boolean`
@@ -61,6 +71,8 @@ import { HashLink } from 'react-router-hash-link';
 </HashLink>;
 ```
 
+---
+
 ### `scroll: function`
 
 - Custom scroll function called with the element to scroll to, e.g. `const myScrollFn = element => {...}`
@@ -76,6 +88,8 @@ import { HashLink } from 'react-router-hash-link';
 </HashLink>;
 ```
 
+---
+
 ### Scroll to top of page
 
 - To scroll to the top of the page set the hash fragment to `#` (empty) or `#top`
@@ -88,16 +102,22 @@ import { HashLink } from 'react-router-hash-link';
 <HashLink to="#top">Link to Top of Page</HashLink>
 ```
 
+---
+
 ### Scroll with offset
 
 - To scroll with offset use a custom scroll function, one way of doing this can be found [here](https://github.com/rafgraph/react-router-hash-link/issues/25#issuecomment-536688104)
 
+---
+
 ### `elementId: string`
 
 - Scroll to the element with matching id
 - Used instead of providing a hash fragment as part of the `to` prop, if both are present then the `elementId` will override the `to` prop's hash fragment
 - Note that it is generally recommended to use the `to` prop's hash fragment instead of the `elementId`
 
+---
+
 ## Custom `Link`
 
 The exported components are wrapped versions of the `Link` and `NavLink` exports of react-router-dom. In some cases you may need to provide a custom `Link` implementation.
@@ -118,6 +138,8 @@ const MyComponent = () => (
 );
 ```
 
+---
+
 ## Focus Management
 
 `react-router-hash-link` attempts to recreate the native browser focusing behavior as closely as possible.

demo/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

demo/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

demo/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Rafael Pedicini
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

demo/README.md

@@ -0,0 +1,3 @@
+# Demo App for [`react-router-hash-link`](https://github.com/rafgraph/react-router-hash-link)
+
+Live demo app: https://react-router-hash-link.rafgraph.dev