Merge pull request #24 from victortrusov/1.0.0

1.0.0

.editorconfig

@@ -0,0 +1,20 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+# Unix-style newlines with a newline ending every file
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.{yml,yaml,json,xml,html,htm}]
+indent_size = 2
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,84 @@
+module.exports = {
+  root: true,
+  'env': {
+    'browser': true,
+    'es2021': true
+  },
+  ignorePatterns: [
+    'node_modules/**',
+    '**/dist/**',
+  ],
+  'extends': [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended'
+  ],
+  'parser': '@typescript-eslint/parser',
+  'parserOptions': {
+    'ecmaFeatures': {
+      'jsx': true
+    },
+    'ecmaVersion': 'latest',
+    'sourceType': 'module'
+  },
+  'plugins': [
+    'react',
+    '@typescript-eslint'
+  ],
+  'rules': {
+    'no-var': 'error',
+    'no-undef': 'off',
+    'no-empty': 'off',
+    'no-console': 'warn',
+    'no-debugger': 'warn',
+    'prefer-const': 'warn',
+    'camelcase': 'warn',
+    'indent': [
+      'warn',
+      2,
+      {
+        'SwitchCase': 1
+      }
+    ],
+    'linebreak-style': [
+      'warn',
+      'unix'
+    ],
+    'quotes': [
+      'warn',
+      'single',
+      {
+        'avoidEscape': true
+      }
+    ],
+    'semi': [
+      'warn',
+      'always'
+    ],
+    'comma-dangle': [
+      'warn',
+      'only-multiline'
+    ],
+    'key-spacing': 'warn',
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-unused-vars': 'warn',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/no-empty-function': 'off',
+    '@typescript-eslint/member-delimiter-style': 'warn',
+    '@typescript-eslint/type-annotation-spacing': 'warn',
+    '@typescript-eslint/comma-spacing': 'warn',
+    '@typescript-eslint/func-call-spacing': 'warn',
+    '@typescript-eslint/keyword-spacing': 'warn',
+    '@typescript-eslint/object-curly-spacing': [
+      'warn',
+      'always'
+    ],
+    '@typescript-eslint/space-before-function-paren': ['warn', {
+      'anonymous': 'never',
+      'named': 'never',
+      'asyncArrow': 'always'
+    }],
+    'react/prop-types': 'off'
+  }
+};

README.md

@@ -1,8 +1,8 @@
-# react-router-loading
+# react-router-loading [![npm version](https://badge.fury.io/js/react-router-loading.svg)](https://badge.fury.io/js/react-router-loading)
 
-Custom react router switch that allows you to load data before switching the screen\
-\
-[![npm version](https://badge.fury.io/js/react-router-loading.svg)](https://badge.fury.io/js/react-router-loading)
+Wrapper for `react-router` that allows you to load data before switching the screen  
+
+### ‼️ Version `1.0.0-beta` supports React Router 6 only, please use version `0.x.x` for React Router 5 ‼️
 
 \
 ![](example.gif)
@@ -11,16 +11,14 @@ Custom react router switch that allows you to load data before switching the scr
 
 ## Requirements
 
-### !!! Current version doesn't support React Router 6 !!!  
-It will be supported in the next major version I'm working on
-
-```js
-"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-"react-router-dom": "^5.0.0"
-```
+|  |  |  |
+| ------------ | ------- | --- |
+| react        | >= 16.8 |     |
+| react-dom    | >= 16.8 |     |
+| react-router | **5**       |  **Package version 0.x.x**  |
+| react-router | **6**       |  **Package version  1.x.x**  |
 
-This package uses `react-router-dom` as main router so you should implement it in your project first.
+This package uses `react-router` (`react-router-dom` or `react-router-native`) as main router so you should implement it in your project first.
 
 ## Installation
 
@@ -29,8 +27,46 @@ npm install react-router-loading
 ## or
 yarn add react-router-loading
 ```
+# Usage
+## React Router 6 (package version 1.x.x)
+
+In your router section import `Routes` and `Route` from `react-router-loading` instead of `react-router-dom` or `react-router-native`
+```js
+import { Routes, Route } from "react-router-loading";
+
+<Routes>
+    <Route path="/page1" element={<Page1 />} />
+    <Route path="/page2" element={<Page2 />} />
+    ...
+</Routes>
+```
 
-## Usage
+Add `loading` prop to every route that needs to be loaded before switching
+```js
+<Routes>
+    // data will be loaded before switching
+    <Route path="/page1" element={<Page1 />} loading />
+
+    // instant switch as before
+    <Route path="/page2" element={<Page2 />} />
+    ...
+</Routes>
+```
+
+Add `loadingContext.done()` at the end of your initial loading method in components that mentioned in routes with `loading` prop (in this case it's `Page1`)
+```js
+import { useLoadingContext } from "react-router-loading";
+const loadingContext = useLoadingContext();
+
+const loading = async () => {
+    // loading some data
+
+    // call method to indicate that loading is done and we are ready to switch
+    loadingContext.done();
+};
+```
+
+## React Router 5 (package version 0.x.x)
 
 In your router section import `Switch` and `Route` from `react-router-loading` instead of `react-router-dom`
 ```js
@@ -43,7 +79,7 @@ import { Switch, Route } from "react-router-loading";
 </Switch>
 ```
 
-Add `loading` prop to every route that must be loaded before switching
+Add `loading` prop to every route that needs to be loaded before switching
 ```js
 <Switch>
     // data will be loaded before switching
@@ -67,7 +103,7 @@ const loading = async () => {
     loadingContext.done();
 };
 ```
-or for class components
+## Class components
 ```js
 import { LoadingContext } from "react-router-loading";
 
@@ -92,30 +128,31 @@ const ClassComponentWrapper = (props) =>
 
 ## Config
 
-You can specify loading screen that would be shown at the first loading of your app
+You can specify loading screen that will be shown at the first loading of your app
 ```js
 const MyLoadingScreen = () => <div>Loading...</div>
 
-<Switch loadingScreen={MyLoadingScreen}>
+<Routes loadingScreen={MyLoadingScreen}> // or <Switch>
 ...
-</Switch>
+</Routes>
 ```
 
 Use `maxLoadingTime` property if you want to limit loading time. Pages will switch if loading takes more time than specified in this property (ms).
 ```js
-<Switch maxLoadingTime={500}>
+
+<Routes maxLoadingTime={500}> // or <Switch>
 ...
-</Switch>
+</Routes>
 ```
 
-If you want to change LoadingContext globally you can pass `isLoading` property to the Switch. This way you don't need to add extra `loadingContext.done();` in your page components after fetching is done.
+If you want to change LoadingContext globally you can pass `isLoading` property to the `<Routes />` or `<Switch />`. This way you don't need to add extra `loadingContext.done();` in your page components after fetching is done.
 ```js
 import { useIsFetching } from 'react-query';
 const isFetching = useIsFetching();
 
-<Switch isLoading={isFetching}>
+<Routes isLoading={isFetching}> // or <Switch>
 ...
-</Switch>
+</Routes>
 ```
 
 Call `topbar.config()` if you want to change topbar configuration. More info <a href="http://buunguyen.github.io/topbar/" target="_blank">here</a>.
@@ -135,12 +172,30 @@ topbar.config({
     className: 'topbar'
 });
 ```
-## How to run example on localhost
+# Development
 
 Clone repository and run
+```sh
+# go to lib folder
+cd packages/react-router-loading
+
+# restore packages
+yarn
+
+# build lib
+yarn build
+
+# go to example folder
+cd ../../examples/react-router-6
+
+# restore packages
+yarn
+
+# run example
+yarn dev
 ```
-yarn build && yarn start
-```
+
+run `yarn build` in lib folder each time you want to apply changes
 
 ## License