display-my-framework v0.1.3
display-my-framework
A minimal React JS framework to get started.
Usage
- Install the framework >> npm i display-my-framework.
- Wrap the routes / components you want to take advantage of the framework with the DMFFramework component.
<DMFFramework
authState={{ customAuthProperty: 123 }}
authReducer={() => state}
errorState={{ customErrorProperty: 123 }}
errorReducer={() => state}
menuState={{ customMenuProperty: 123 }}
menuReducer={() => state}
>
<TestComponent />
</DMFFramework>
Properties of the framework component
The framework accepts the following configuration properties.
config
Configuration options passed to the framework. The framework natively only supports fetch interceptors at the moment. Extra properties passed it's for developers use.
Default value:
const defaultConfig = {
interceptors: [],
};
authState
State override for the auth provider.
authReducer
Reducer override for the auth provider.
errorState
State override for the error provider.
errorReducer
Reducer override for the error provider.
menuState
State override for the menu provider.
menuReducer
Reducer override for the menu provider.
Components
The framework has the following helper components
Layout
This component let's you wrap components inside a wrapper that exposes layout state and dispatch trough a render prop.
<DMFLayout
reducer={() => state}
initialState={{test: 123}}
render={
(state, dispatch) => <></>
}
>
<ComponentWhoUsesStore>
</DMFStore>
Store
This component let's you create a store provider quickly.
<DMFStore reducer={() => state} initialState={{test: 123}}>
<ComponentWhoUsesStore>
</DMFStore>
After that you can access that data trough the following hook:
const { state, dispatch } = useDMFStore();
Hooks
These are the hooks available to the developer who uses the framework. All the hooks share one action to change state trough UPDATE_FIELD in the actions object.
dispatch({ type: actions.UPDATE_FIELD payload: data })
Fetch
Native fetch function with the posibility of adding interceptors:
const { interceptedFetch } = useDMFInterceptedFetch();
Globally with config:
export const CONFIG = {
interceptors: [
{status: 401, callback: response => console.log("Not logged")},
],
}
Or when called:
interceptedFetch(
['https://run.mocky.io/v3/cd66fd73-c956-4118-a92e-1f2953ba7ba7'],
[
{status: 401, callback: response => console.log("Not logged")},
{status: 200, callback: response => console.log("Todo ok")}
]
)
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
Config
With this we can access the configuration options anywhere in the framework in a reliable way.
const config = useDMFConfigProvider();
Console
This hook allows to print data to the console only when in development mode. The function returned accepts two parameters:
- type. The type of log we want. Same types as native console functions.
- value. Data we want to output to the console.
const { log } = useConsole();
log('error', 'This is an error');
Error
This hook allows to access the error provider data.
const { state, dispatch } = useDMFErrorProvider();
Default values:
const defaultInitialState = {
loading: false,
open: false,
message: "",
};
Layout
This hook allows to access the layout provider data.
const { state, dispatch } = useDMFLayoutProvider();
Default values:
const defaultInitialState = {
data: null,
loading: false
};
Menu
This hook allows to access the menu provider data.
const { state, dispatch } = useDMFMenuProvider();
Default values:
const defaultInitialState = {
routes: [],
path: '',
loading :false
};
Auth
This hook allows to access the auth provider data.
const { state, dispatch } = useDMFAuthProvider();
Default values:
const defaultInitialState = {
token: '',
refreshToken: ''
};