react-fs-router 1.0.11 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.idea/git_toolbox_prj.xml +15 -0
- package/README.md +11 -17
- package/package.json +1 -1
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?>
|
|
2
|
+
<project version="4">
|
|
3
|
+
<component name="GitToolBoxProjectSettings">
|
|
4
|
+
<option name="commitMessageIssueKeyValidationOverride">
|
|
5
|
+
<BoolValueOverride>
|
|
6
|
+
<option name="enabled" value="true" />
|
|
7
|
+
</BoolValueOverride>
|
|
8
|
+
</option>
|
|
9
|
+
<option name="commitMessageValidationEnabledOverride">
|
|
10
|
+
<BoolValueOverride>
|
|
11
|
+
<option name="enabled" value="true" />
|
|
12
|
+
</BoolValueOverride>
|
|
13
|
+
</option>
|
|
14
|
+
</component>
|
|
15
|
+
</project>
|
package/README.md
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
# React-fs-router
|
|
2
2
|
|
|
3
|
-
A cli library
|
|
4
|
-
|
|
3
|
+
A cli library for implementing file-system based routing in React applications.
|
|
5
4
|
## Installation
|
|
6
5
|
|
|
7
6
|
Use yarn or npm to install react-fs-router
|
|
@@ -19,13 +18,13 @@ npm install react-fs-router
|
|
|
19
18
|
The position of a file in the folder structure defines it's path. Files named index are treated as the root and default file in each folder.
|
|
20
19
|
You can define a dynamic route by placing the name of the file in brackets. ie: [id].js ==> :id
|
|
21
20
|
|
|
22
|
-
| Arguments
|
|
23
|
-
|
|
|
24
|
-
| -i
|
|
25
|
-
| -o
|
|
26
|
-
| -ext
|
|
27
|
-
| -p
|
|
28
|
-
| -b
|
|
21
|
+
| Arguments | Result |
|
|
22
|
+
| -------------------------- | ------------------------------------------------------------------------------------------------------------- |
|
|
23
|
+
| -i --input <directory> | Path to watch for changes. Required. |
|
|
24
|
+
| -o --output <output> | Optional argument that takes a path to place output files in. Defaults to the input directory. |
|
|
25
|
+
| -ext --extention <extention> | Optional argument to change the file extension of the output files. Defaults to .js . |
|
|
26
|
+
| -p --pageProperties [type] | Optional boolean argument to disable generating page_properties file. Defaults to false. |
|
|
27
|
+
| -b --build [type] | Optional boolean argument that tells the program to run once. Defaults to false. Intended for build commands. |
|
|
29
28
|
|
|
30
29
|
```JSON
|
|
31
30
|
"scripts": {
|
|
@@ -45,7 +44,7 @@ Run react-fs-router
|
|
|
45
44
|
npm run rfr
|
|
46
45
|
```
|
|
47
46
|
|
|
48
|
-
The program will then generate two files one containing imports and exports of all the files inside the provided path and one containing an array of objects
|
|
47
|
+
The program will then generate two files one containing imports and exports of all the files inside the provided path and one containing an array of objects describing each file. The properties in the mentioned object are as follows:
|
|
49
48
|
|
|
50
49
|
```javascript
|
|
51
50
|
|
|
@@ -70,11 +69,6 @@ To use the generated files with react-router:
|
|
|
70
69
|
|
|
71
70
|
```javascript xml react
|
|
72
71
|
function App() {
|
|
73
|
-
const [pages, setPages] = useState();
|
|
74
|
-
|
|
75
|
-
useEffect(() => {
|
|
76
|
-
setPages(renderConponents(Pages));
|
|
77
|
-
}, []);
|
|
78
72
|
|
|
79
73
|
function renderComponent(key, module) {
|
|
80
74
|
return module[key] || module["default"] || module;
|
|
@@ -98,7 +92,7 @@ function App() {
|
|
|
98
92
|
}
|
|
99
93
|
return renders;
|
|
100
94
|
}
|
|
101
|
-
return <Switch>{
|
|
95
|
+
return <Switch>{setPages(renderConponents(Pages))}</Switch>;
|
|
102
96
|
}
|
|
103
97
|
```
|
|
104
98
|
|
|
@@ -112,7 +106,7 @@ Place this component inside BrowserRouter
|
|
|
112
106
|
|
|
113
107
|
## Using with Ant Pro Layout
|
|
114
108
|
|
|
115
|
-
The routes array generated by this library can be easily used with Ant
|
|
109
|
+
The routes array generated by this library can be easily used with Ant Designs pro layout component.
|
|
116
110
|
The following is an example using an hoc:
|
|
117
111
|
|
|
118
112
|
```javascript xml
|