This react component library is possible to get asynchronous data before rendering. this is like next.js 🚀
I have made async-react-router
like Routing of Next.js in the past.
But, that library is very complicated.
In order to make it more simple, I made next-props
as a component library, not routing library.
Instead, SSR is not supported.
Feature
- This is component library of React.
- Support React version 16.
- Support async/await like next.js.
- No depend on react-router.
- No depend on rxjs.
- But, You can combine asynchronous library like rxjs.
- No Support SSR.
- In the case of SSR, it is not possible to deal with asynchronous because it relies on routing.
- Asynchronous is very difficult...
- Support view for initial rendering.
Demo
Example
;;;; // Sleep { return ;} Component static async { await ; return message: 'Home is one second sleep.' ; } { return <div>thispropsmessage</div> ; }; ;
API
NextProps props
props.component
You specify the component you want to get data asynchronously.
<NextProps component=HomeComponent/>
props.streamer((load, setInitialProps) => any)
You can use this hook api to control the asynchronous order. The example is RxJS.
// Set RxJS;const stream = ; const streamer = { stream ; }; <NextProps component=HomeComponent streamer=streamer fireStreamer=fireStreamer/>
load
is Promise to handle getInitialProps(props)
.
setInitialProps
set the data acquired by load
as initialProps.
props.fireStreamer(() => any)
Setting props.streamer
makes it Observable
, so you also need to set fire.
const fireStreamer = { streamnext;}; <NextProps component=HomeComponent streamer=streamer fireStreamer=fireStreamer/>
props.firstRender(() => any)
Rendering does not stop even if it is asynchronous. Please use this function if you want to make it a specific view during initial rendering.
const firstRender = { return <div className="text-center" style=margin: "100px 0"> <i className="fa fa-cog fa-spin fa-5x fa-fw"/> </div> ;}; <NextProps component=HomeComponent firstRender=firstRender/>
Function in props.component of NextProps
component.getInitialProps(props)
You can get data considering async / await using getInitialProps(props)
.
Component static async { await ; return message: 'Home is one second sleep.' ; }
component.initialPropsWillGet()
initialPropsWillGet()
is called before getInitialProps(props)
.
async/await is not supported.
Component { console; }
component.initialPropsDidGet()
initialPropsDidGet()
is called after getInitialProps(props)
.
async/await is not supported.
Component { console; }