https://github.com/rafgraph/react-fast-mount
Fast mount slow loading React components
https://github.com/rafgraph/react-fast-mount
Last synced: about 1 year ago
JSON representation
Fast mount slow loading React components
- Host: GitHub
- URL: https://github.com/rafgraph/react-fast-mount
- Owner: rafgraph
- License: mit
- Created: 2017-05-22T20:29:41.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2020-09-11T21:35:55.000Z (over 5 years ago)
- Last Synced: 2025-04-04T13:52:57.423Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://react-fast-mount.rafgraph.dev
- Size: 195 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Fast Mount
> [Demo website](https://react-fast-mount.rafgraph.dev) (demo code on the [`gh-pages` branch](https://github.com/rafgraph/react-fast-mount/tree/gh-pages))
Fast mount slow loading components for improved responsiveness and perceived performance. This allows a site to respond instantly to user input, even if it is to show a blank screen while the component is loading, so the site is perceived as fast and responsive.
The difference is most noticeable on mobile devices, especially slower devices.
### Usage
React Fast Mount is a high order component (HOC) - just wrap your component in the
Fast Mount function before export, e.g. `export default fastMount(MyComponent);`.
```shell
$ yarn add react-fast-mount
# OR
$ npm install --save react-fast-mount
```
```js
import React from 'react';
import fastMount from 'react-fast-mount';
class MyComponent extends React.Component {
...
render() {
...
}
}
// wrap your component in fastMount to fast mount it
export default fastMount(MyComponent);
// OR
// you can optionally provide a ReactElement as a second argument to use as a container
// for MyComponent - the container will be rendered on the first render (fast),
// and then MyComponent will be rendered inside of it on the second render
export default fastMount(MyComponent,
)
```