# react-you-are-offline

> ReactJS library to output a text when browser is offline (real offline as no wifi or throttled offline)

Latest version **0.1.0** (published 2017-12-16) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-you-are-offline
pnpm add react-you-are-offline
yarn add react-you-are-offline
bun add react-you-are-offline
```

## 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.1.0 |
| Published | 2017-12-16 |
| First published | 2017-12-16 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Edgars Zagorskis |
| Maintainers | edgarszagorskis |
| Keywords | reactjs, network, offline |

## Links

- npm: https://www.npmjs.com/package/react-you-are-offline
- npm.io page: https://npm.io/package/react-you-are-offline

## Dependencies (2)

- [react](https://npm.io/package/react.md) ^15.5.4
- [webpack](https://npm.io/package/webpack.md) ^2.6.1

## Recent versions

- 0.1.0 (latest) — 2017-12-16

## README

# You Are Offline element for ReactJS

[![npm](https://img.shields.io/npm/v/react-you-are-offline.svg)](https://www.npmjs.com/package/react-you-are-offline)
![gzip size](http://img.badgesize.io/https://unpkg.com/react-you-are-offline?compression=gzip&label=gzip%20size)
![badges](https://img.shields.io/badge/license-ISC-lightgrey.svg)

ReactJS library to output a text when browser is offline (real offline as no wifi or throttled offline).

By default it renders green 'online' when online and red 'offline', when offline. But it is possible to override styles, classes and the messages. See "Configuration examples" lower.

## Installation

```
    yarn add react-you-are-offline
    // or
    npm i react-you-are-offline
```

## Usage

```jsx
import { YouAreOffline } from 'react-you-are-offline';

class MyComponent extends React.Component {
    render(){
        return (
            <YouAreOffline />
        )
    }
}

export default MyComponent;
```

## Configuration examples

### Customize online status
```jsx
    let message = 'You are online';
    let customStyle = { color: 'limegreen', backgroundColor: '#333333' };
    let customClass = 'alert alert-success'
    <YouAreOffline whenOnline={customMessage} onlineStyle={customStyle} onlineClass={customClass}/>
```

### Customize offline status
```jsx
    let message = 'You are OFFLINE!';
    let customStyle = { color: 'orange', backgroundColor: '#333333' };
    let customClass = 'alert alert-danger'
    <YouAreOffline whenOffline={customMessage} offlineStyle={customStyle} offlineClass={customClass}/>
```

## Licence

This software is released under [ISC licence](https://choosealicense.com/licenses/isc/)

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