92 lines
2.9 KiB
JavaScript
92 lines
2.9 KiB
JavaScript
export const hooks = {
|
|
/**
|
|
* Define React Providers.
|
|
*
|
|
* Note: `req` will be only be defined when server-side rendering.
|
|
* @param {http.ClientRequest} req The HTTP request object.
|
|
* @invoke SequentialAsync
|
|
* @returns {ReactContextProvider | [ReactContextProvider<Props>, Props]} A React context
|
|
* provider or an array where the first element is a React context provider and the second
|
|
* element is the `props` passed to the provider.
|
|
*/
|
|
'@flecks/react.providers': (req) => {
|
|
return req ? serverSideProvider(req) : [SomeContext.Provider, {value: 'whatever'}];
|
|
},
|
|
/**
|
|
* Define root-level React components that are mounted as siblings on `#main`.
|
|
* Note: `req` will be only be defined when server-side rendering.
|
|
*
|
|
* Return either a React component or an array whose elements must either be a React component
|
|
* or an array of two elements where the first element is the component and the second element
|
|
* is the props passed to the component.
|
|
* @param {http.ClientRequest} req The HTTP request object.
|
|
* @returns {Component | [Component<Props>, Props]} A React component or an array where the first
|
|
* element is a React component and the second element is the `props` passed to the component.
|
|
* @invoke SequentialAsync
|
|
*/
|
|
'@flecks/react.roots': (req) => {
|
|
// Note that we're not returning `<Component />`, but `Component`.
|
|
return [
|
|
Component,
|
|
[SomeOtherComponent, {prop: 'value'}]
|
|
];
|
|
// You can also just:
|
|
return Component;
|
|
},
|
|
/**
|
|
* Provide routes for React Router.
|
|
*
|
|
* You can also build routes from a file structure using e.g.:
|
|
*
|
|
* ```js
|
|
* import {createRoutesFromContext} from '@flecks/react/router';
|
|
*
|
|
* export const hooks = {
|
|
* '@flecks/react/router.routes': () => (
|
|
* createRoutesFromContext(require.context('./routes'))
|
|
* ),
|
|
* };
|
|
* ```
|
|
*
|
|
* See [the documentation page on routing](../react#routing) for more details.
|
|
*
|
|
* @returns {RouteObject[]} An array of React Router route objects.
|
|
*/
|
|
'@flecks/react/router.routes': () => {
|
|
// You can also just return routes how React Router expects:
|
|
return [
|
|
{
|
|
path: '/',
|
|
Component: function Component() {
|
|
return <p>This is the root route</p>;
|
|
},
|
|
},
|
|
{
|
|
path: '/team',
|
|
children: [
|
|
{
|
|
path: ':teamId',
|
|
Component: function Component() {
|
|
const {teamId} = useParams();
|
|
return <p>This is team {teamId}.</p>;
|
|
},
|
|
},
|
|
{
|
|
index: true,
|
|
Component: function Component() {
|
|
return <p>This is the team overview.</p>;
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
path: '/about',
|
|
Component: function Component() {
|
|
return <p>This is the about page</p>;
|
|
},
|
|
},
|
|
];
|
|
}
|
|
};
|
|
|