https://github.com/flasd/scaffold
Builds AuthContext, ThemeContext & RouterContext into a React app;
https://github.com/flasd/scaffold
Last synced: 10 months ago
JSON representation
Builds AuthContext, ThemeContext & RouterContext into a React app;
- Host: GitHub
- URL: https://github.com/flasd/scaffold
- Owner: flasd
- Created: 2019-01-15T22:41:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-01-15T22:42:54.000Z (over 7 years ago)
- Last Synced: 2025-03-15T11:12:07.023Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 185 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Scaffold
Builds AuthContext, ThemeContext & RouterContext into a app;
### Installation
Install the latest version from NPM with the following command:
```sh
npm install @flasd/scaffold
```
### Usage
To start using the Scaffold functionality, you'll need to wrap your app in it.
```javascript
import Scaffold from "@flasd/scaffold";
export default function App() {
return (
Your components
);
}
```
Scaffold wraps your app with a ThemeContext, AuthContext and a Router from `react-router-dom`;
Also, it exports a few usefull components and decorators.
#### history
This module is used to control routing using the `react-router-dom` as its context. Check its docs at [this url](https://www.npmjs.com/package/history).
```javascript
import { history } from "@flasd/scaffold";
history.push("/my-route");
```
#### ProtectedRoute
Instrument routes so that they won't show up if the user is not logged-in.
```javascript
import { Switch } from "react-router-dom";
import { ProtectedRoute } from "@flasd/scaffold";
export default function App() {
return (
);
}
// It has the following prop-types
ProtectedRoute.propTypes = {
component: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
fallbackPath: PropTypes.string.isRequired,
path: PropTypes.string.isRequired
};
```
#### Public Route
Same thing as ProtectedRoute but does the oposite. If it finds 'login' in the url it will redirect the user to a fallback path.
```javascript
import { Switch } from "react-router-dom";
import { PublicRoute } from "@flasd/scaffold";
export default function App() {
return (
);
}
// It has the following prop-types
PublicRoute.propTypes = {
component: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,
fallbackPath: PropTypes.string.isRequired,
path: PropTypes.string.isRequired
};
```
#### withAuth
Decorator to inject auth state and functions into a component. The AuthContext manages authentication internaly and exposes two methods to interface with your control: `login()` & `logout()`.
```javascript
import { withAuth } from '@flasd/scaffold';
export function MyComponent(props) {
const {
user,
hasAuth,
fingerprint,
login,
logout,
} = props;
return
Hello;
}
export default withAuth()(MyComponent);
```
Ok, let's break it down:
##### login
The login function should be called after you authenticated your user with your backend. It spectsa JWT token with a paylaod or just an Object, that follows the following schema:
```typescript
type User = {
uid: !String,
name: !String,
role: !String,
}
```
##### logout
Logs the user out. Simple as that.
##### fingerprint
The first time your app runs on a user machine, we create a fingerprint from he's/she's machine. You can use this to ensure users are not moving tokens around.
##### user & hasAuth
`user` follows the same schema as shown above. `hasAuth` is a boolean.
#### withTheme
Inject theme variables into any component:
```javascript
import { withTheme } from '@flasd/scaffold';
export function MyComponent(props) {
const {
mainColor,
accentColor,
logoUrl,
fontFamily,
baseFontSize,
} = props;
return
Hello;
}
export default withTheme()(MyComponent);
```
All properties are strings and the defaults are just empty strings. You can overide them globally when you render `` or your can pass a object to `withTheme` with the properties you wish to overide.
### Copyright e Licença
Copyright (c) 2019 [Marcel de Oliveira Coelho](https://github.com/flasd) under the [MIT License](https://github.com/flasd/scaffold/blob/master/LICENSE.md). Go Crazy. :rocket: