react-fs-router v1.0.13
React-fs-router
A cli library for implementing file-system based routing in React applications.
Installation
Use yarn or npm to install react-fs-router
yarn add react-fs-router
npm install react-fs-router
Usage
The position of a file in the folder structure defines its path. Files named index are treated as the root file in each folder. You can define a dynamic route by placing the name of the file in brackets. ie: id.js ==> :id
Arguments | Result |
---|---|
-i --input | Path to watch for changes. Required. |
-o --output | Optional argument that takes a path to place output files in. Defaults to the input directory. |
-ext --extention | Optional argument to change the file extension of the output files. Defaults to .js . |
-p --pageProperties type | Optional boolean argument to disable generating page_properties file. Defaults to false. |
-b --build type | Optional boolean argument that tells the program to run once. Defaults to false. Intended for build commands. |
"scripts": {
"rfr": "rfr -d <path to pages folder>"
}
Run the development server
npm run start
Run react-fs-router
npm run rfr
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:
component: // Name of the default export of the file
name: // Name of the component mentioned in the file as // name: string
icon: // Name of the icon mentioned in the file as // icon: string
index: // A number by which the objects in this array are sorted by. mentioned in the file as // index: number
file: // The name of the file this object is for
path: // The path of this file in relation to its position in the folder structure. index files are always "/"
Name, icon and index can be written in each file as comments and react-fs-router will read and place them in the output file.
// name: Home
// icon: HomeOutlined
// index: 0
To use the generated files with react-router:
function App() {
function renderComponent(key, module) {
return module[key] || module["default"] || module;
}
function renderConponents(imports: Record<string, ReactNode>) {
let renders = [];
// Looping through the Pages import
for (const [key, Value] of Object.entries(imports)) {
const Component = renderComponent(key, Value);
// Finding the correct route object.
const route = routes.filter(
(config) => config.component === Component.name
)[0];
renders.push(
<Route exact={true} key={route.path} path={route?.path || ""}>
<Component />
</Route>
);
}
return renders;
}
return <Switch>{renderConponents(Pages)}</Switch>;
}
Place this component inside BrowserRouter
<BrowserRouter>
<App />
</BrowserRouter>
Using with Ant Pro Layout
The properties file generated by this library can be easily used with Ant Designs pro layout component. The following is an example using an hoc:
function Layout(Component) {
return class extends React.Component {
state = {
path: "",
};
render() {
const makeIcon = (Icon) => <Icon />;
const loopMenuItem = (menus) =>
// If name and icon are found in the file of the component, they will appear in the
// pro layout menu with the specified name and icon.
menus.map(({ icon, children, ...item }) => {
return {
...item,
icon: icon && makeIcon(Icons[icon]),
children: children && loopMenuItem(children),
};
});
return (
<ProLayout
menuItemRender={(item, dom) => (
<Link
onClick={() => this.setState({ path: item.path || "/" })}
to={item.path}
>
{dom}
</Link>
)}
menu={{ request: async () => loopMenuItem(routes) }}
style={{ height: "100vh" }}
location={{ pathname: this.state.path || window.location.pathname }}
>
<PageContainer>
<Component {...this.props} />
</PageContainer>
</ProLayout>
);
}
};
}
Usage with Concurrently
You can use concurrently to run rfr with react at the same time.
npm install -g concurrently
concurrently --kill-others "npm run start" "npm run rfr"
Caveats
- Since all of the files are imported and re-exported, having two files with the same name as default export will cause an error.
- Running this package along with the react start script is not recommended as it interferes with the react script. Consider using a package like concurrently for this purpose.
License
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago