# react-fast-mount

> High order component to fast mount slow renderering React components for improved app responsiveness.

Latest version **0.2.2** (published 2020-09-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-fast-mount
pnpm add react-fast-mount
yarn add react-fast-mount
bun add react-fast-mount
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2020-09-11 |
| First published | 2017-05-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 17.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Rafael Pedicini |
| Maintainers | rafgraph |
| Keywords | react, performance, responsiveness, mobile |

## Links

- npm: https://www.npmjs.com/package/react-fast-mount
- Repository: https://github.com/rafgraph/react-fast-mount
- Homepage: https://github.com/rafgraph/react-fast-mount#readme
- Issues: https://github.com/rafgraph/react-fast-mount/issues
- npm.io page: https://npm.io/package/react-fast-mount

## Recent versions

- 0.2.2 (latest) — 2020-09-11
- 0.2.1 — 2017-09-26
- 0.2.0 — 2017-05-23
- 0.1.0 — 2017-05-22

## 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, <div style={{ height: '200px' }} />)
```

---
_Source: https://npm.io/package/react-fast-mount · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._