Skip to content

Commit 1dcffbd

Browse files
victortrusovvictortrusov
authored
Merge pull request #24 from victortrusov/1.0.0
1.0.0
2 parents 10161ed + 74f42cc commit 1dcffbd

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+2533
-3674
lines changed

‎.editorconfig

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
# EditorConfig is awesome: https://EditorConfig.org
2+
3+
# top-most EditorConfig file
4+
root = true
5+
6+
# Unix-style newlines with a newline ending every file
7+
[*]
8+
end_of_line = lf
9+
charset = utf-8
10+
trim_trailing_whitespace = true
11+
insert_final_newline = true
12+
indent_style = space
13+
indent_size = 2
14+
15+
[*.{yml,yaml,json,xml,html,htm}]
16+
indent_size = 2
17+
18+
[*.md]
19+
insert_final_newline = false
20+
trim_trailing_whitespace = false

‎.eslintignore

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎.eslintrc

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎.eslintrc.js

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
module.exports = {
2+
root: true,
3+
'env': {
4+
'browser': true,
5+
'es2021': true
6+
},
7+
ignorePatterns: [
8+
'node_modules/**',
9+
'**/dist/**',
10+
],
11+
'extends': [
12+
'eslint:recommended',
13+
'plugin:react/recommended',
14+
'plugin:@typescript-eslint/recommended'
15+
],
16+
'parser': '@typescript-eslint/parser',
17+
'parserOptions': {
18+
'ecmaFeatures': {
19+
'jsx': true
20+
},
21+
'ecmaVersion': 'latest',
22+
'sourceType': 'module'
23+
},
24+
'plugins': [
25+
'react',
26+
'@typescript-eslint'
27+
],
28+
'rules': {
29+
'no-var': 'error',
30+
'no-undef': 'off',
31+
'no-empty': 'off',
32+
'no-console': 'warn',
33+
'no-debugger': 'warn',
34+
'prefer-const': 'warn',
35+
'camelcase': 'warn',
36+
'indent': [
37+
'warn',
38+
2,
39+
{
40+
'SwitchCase': 1
41+
}
42+
],
43+
'linebreak-style': [
44+
'warn',
45+
'unix'
46+
],
47+
'quotes': [
48+
'warn',
49+
'single',
50+
{
51+
'avoidEscape': true
52+
}
53+
],
54+
'semi': [
55+
'warn',
56+
'always'
57+
],
58+
'comma-dangle': [
59+
'warn',
60+
'only-multiline'
61+
],
62+
'key-spacing': 'warn',
63+
'@typescript-eslint/interface-name-prefix': 'off',
64+
'@typescript-eslint/explicit-function-return-type': 'off',
65+
'@typescript-eslint/no-unused-vars': 'warn',
66+
'@typescript-eslint/no-empty-interface': 'off',
67+
'@typescript-eslint/no-empty-function': 'off',
68+
'@typescript-eslint/member-delimiter-style': 'warn',
69+
'@typescript-eslint/type-annotation-spacing': 'warn',
70+
'@typescript-eslint/comma-spacing': 'warn',
71+
'@typescript-eslint/func-call-spacing': 'warn',
72+
'@typescript-eslint/keyword-spacing': 'warn',
73+
'@typescript-eslint/object-curly-spacing': [
74+
'warn',
75+
'always'
76+
],
77+
'@typescript-eslint/space-before-function-paren': ['warn', {
78+
'anonymous': 'never',
79+
'named': 'never',
80+
'asyncArrow': 'always'
81+
}],
82+
'react/prop-types': 'off'
83+
}
84+
};

‎README.md

Lines changed: 82 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
# react-router-loading
1+
# react-router-loading [![npm version](https://badge.fury.io/js/react-router-loading.svg)](https://badge.fury.io/js/react-router-loading)
22

3-
Custom react router switch that allows you to load data before switching the screen\
4-
\
5-
[![npm version](https://badge.fury.io/js/react-router-loading.svg)](https://badge.fury.io/js/react-router-loading)
3+
Wrapper for `react-router` that allows you to load data before switching the screen
4+
5+
### ‼️ Version `1.0.0-beta` supports React Router 6 only, please use version `0.x.x` for React Router 5 ‼️
66

77
\
88
![](example.gif)
@@ -11,16 +11,14 @@ Custom react router switch that allows you to load data before switching the scr
1111

1212
## Requirements
1313

14-
### !!! Current version doesn't support React Router 6 !!!
15-
It will be supported in the next major version I'm working on
16-
17-
```js
18-
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
19-
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
20-
"react-router-dom": "^5.0.0"
21-
```
14+
| | | |
15+
| ------------ | ------- | --- |
16+
| react | >= 16.8 | |
17+
| react-dom | >= 16.8 | |
18+
| react-router | **5** | **Package version 0.x.x** |
19+
| react-router | **6** | **Package version 1.x.x** |
2220

23-
This package uses `react-router-dom` as main router so you should implement it in your project first.
21+
This package uses `react-router` (`react-router-dom` or `react-router-native`) as main router so you should implement it in your project first.
2422

2523
## Installation
2624

@@ -29,8 +27,46 @@ npm install react-router-loading
2927
## or
3028
yarn add react-router-loading
3129
```
30+
# Usage
31+
## React Router 6 (package version 1.x.x)
32+
33+
In your router section import `Routes` and `Route` from `react-router-loading` instead of `react-router-dom` or `react-router-native`
34+
```js
35+
import { Routes, Route } from "react-router-loading";
36+
37+
<Routes>
38+
<Route path="/page1" element={<Page1 />} />
39+
<Route path="/page2" element={<Page2 />} />
40+
...
41+
</Routes>
42+
```
3243

33-
## Usage
44+
Add `loading` prop to every route that needs to be loaded before switching
45+
```js
46+
<Routes>
47+
// data will be loaded before switching
48+
<Route path="/page1" element={<Page1 />} loading />
49+
50+
// instant switch as before
51+
<Route path="/page2" element={<Page2 />} />
52+
...
53+
</Routes>
54+
```
55+
56+
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`)
57+
```js
58+
import { useLoadingContext } from "react-router-loading";
59+
const loadingContext = useLoadingContext();
60+
61+
const loading = async () => {
62+
// loading some data
63+
64+
// call method to indicate that loading is done and we are ready to switch
65+
loadingContext.done();
66+
};
67+
```
68+
69+
## React Router 5 (package version 0.x.x)
3470

3571
In your router section import `Switch` and `Route` from `react-router-loading` instead of `react-router-dom`
3672
```js
@@ -43,7 +79,7 @@ import { Switch, Route } from "react-router-loading";
4379
</Switch>
4480
```
4581

46-
Add `loading` prop to every route that must be loaded before switching
82+
Add `loading` prop to every route that needs to be loaded before switching
4783
```js
4884
<Switch>
4985
// data will be loaded before switching
@@ -67,7 +103,7 @@ const loading = async () => {
67103
loadingContext.done();
68104
};
69105
```
70-
or for class components
106+
## Class components
71107
```js
72108
import { LoadingContext } from "react-router-loading";
73109

@@ -92,30 +128,31 @@ const ClassComponentWrapper = (props) =>
92128

93129
## Config
94130

95-
You can specify loading screen that would be shown at the first loading of your app
131+
You can specify loading screen that will be shown at the first loading of your app
96132
```js
97133
const MyLoadingScreen = () => <div>Loading...</div>
98134

99-
<Switch loadingScreen={MyLoadingScreen}>
135+
<Routes loadingScreen={MyLoadingScreen}> // or <Switch>
100136
...
101-
</Switch>
137+
</Routes>
102138
```
103139

104140
Use `maxLoadingTime` property if you want to limit loading time. Pages will switch if loading takes more time than specified in this property (ms).
105141
```js
106-
<Switch maxLoadingTime={500}>
142+
143+
<Routes maxLoadingTime={500}> // or <Switch>
107144
...
108-
</Switch>
145+
</Routes>
109146
```
110147

111-
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.
148+
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.
112149
```js
113150
import { useIsFetching } from 'react-query';
114151
const isFetching = useIsFetching();
115152

116-
<Switch isLoading={isFetching}>
153+
<Routes isLoading={isFetching}> // or <Switch>
117154
...
118-
</Switch>
155+
</Routes>
119156
```
120157

121158
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({
135172
className: 'topbar'
136173
});
137174
```
138-
## How to run example on localhost
175+
# Development
139176

140177
Clone repository and run
178+
```sh
179+
# go to lib folder
180+
cd packages/react-router-loading
181+
182+
# restore packages
183+
yarn
184+
185+
# build lib
186+
yarn build
187+
188+
# go to example folder
189+
cd ../../examples/react-router-6
190+
191+
# restore packages
192+
yarn
193+
194+
# run example
195+
yarn dev
141196
```
142-
yarn build && yarn start
143-
```
197+
198+
run `yarn build` in lib folder each time you want to apply changes
144199

145200
## License
146201

‎babel.config.js

Lines changed: 0 additions & 21 deletions
This file was deleted.

‎example/index.html

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)