Examples

Form

As simple as that:

loading...

Todo List

loading...

Clock

loading...

Checkbox

loading...

Fetch Data

Fetch data inside didMount().

loading...

Fetch Data (with Suspense)

Fetch data with <Suspense />. In this example Suspense gets the props names as a promise (a function that returns a promise, () => Promise<any>) and once resolved, it will pass the results as props to its children. The List Component will therefore have access to names.
Add cache if you want to cache the result of the promise.

loading...

Fetch Data (with Suspense + isomorphic)

Of course <Suspense /> works also on the server-side. To make the App Component from the above example work isomorphic, modify it as following:

loading...

Lazy Image Fadein

A simple component that smoothly fades in your lazy loaded images.

loading...

Store

Use an external store, to store your application's state.

loading...

SSR

SSR example with the built-in Helmet component.

loading...

Update Components (Child/Parent)

Update child Components

You can call update() from parent Components to update() its child Components through Callback Refs or directly. Since the parent Component updates, it will then re-mount the child Components.

Update parent Components from childs

You can call update() from child Components, to update() its parent Components.

loading...

Tagged Template Literals

You can use jsx without any build tools, if you want.

loading...

withStyles()

withStyles() is a HOC (Higher Order Component) that uses Helmet to add Styles to the DOM.

loading...