# react-hide-at

> React stateless functional component for altering the visual experience of responsive and lean webpages.

Latest version **1.0.4** (published 2017-08-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-hide-at
pnpm add react-hide-at
yarn add react-hide-at
bun add react-hide-at
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2017-08-08 |
| First published | 2017-07-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 7 |
| Author | kristof0425 |
| Maintainers | kristof0425 |
| Keywords | react, css, styles, display-none, toggle, stateless-function, responsive, responsive utility, utility, airbnb, breakpoint, breakpoints, alter, ux, display, react-display, react-hide-at, HideAt, hide, airbnb, react-with-styles |

## Links

- npm: https://www.npmjs.com/package/react-hide-at
- Repository: https://github.com/kristof0425/react-hide-at
- Homepage: https://github.com/kristof0425/react-hide-at#readme
- Issues: https://github.com/kristof0425/react-hide-at/issues
- npm.io page: https://npm.io/package/react-hide-at

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^15.6.1
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.10
- [react-with-breakpoints](https://npm.io/package/react-with-breakpoints.md) ^1.0.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2017-08-08
- 1.0.3 — 2017-08-08
- 1.0.2 — 2017-08-02
- 1.0.1 — 2017-07-26
- 1.0.0 — 2017-07-25

## README

# react-hide-at

[![Build Status](https://travis-ci.org/kristof0425/react-hide-at.svg?branch=master)](https://travis-ci.org/kristof0425/react-hide-at)
[![Coverage Status](https://coveralls.io/repos/github/kristof0425/react-hide-at/badge.svg?branch=master)](https://coveralls.io/github/kristof0425/react-hide-at?branch=master)

Build leaner webpages with `react-hide-at` like Airbnb. 👌

## Install

NPM:
`npm install react-hide-at`

## How to use

Here is a basic example, how `HideAt` can be used:

```js
import React from 'react';
import ReactDOM from 'react-dom';

import HideAt from 'react-hide-at';

ReactDOM.render(
  // "Hello world!" will be hidden on medium screen width and below
  <HideAt breakpoint="mediumAndBelow">
    <p>Hello world!</p>
  </HideAt>,
  document.getElementById('app')
);

```

### Props
List of props

`breakpoint`: This is where you can specify on which screen sizes should be hidden by giving one of the following values:
- `small`
- `mediumAndBelow`
- `medium`
- `mediumAndAbove`
- `large`

Eg.:

```js
...

ReactDOM.render(
  <HideAt breakpoint="medium" />,
  document.getElementById('app')
);
```

**NOTE:** The value given to `breakpoint` prop must be like the ones above, otherwise the prop validation is going to fail❗️

### Default breakpoint values
These breakpoint values are inherited from [withBreakpoint](https://github.com/kristof0425/react-with-breakpoints).

Breakpoint | Value
--- | ---
small | 744
medium | 1128
large | `Infinity`

### Overwriting the breakpoints

You can overwrite the breakpoints simply by giving a `breakpoints` prop to the instance of `withBreakpoint`.
Example:

```js
import React from 'react';
import ReactDOM from 'react-dom';
import HideAt from 'react-hide-at';

// Declare a constant and assign an object to it,
// with the following properties:
const breakpoints = {
  small: 479,
  medium: 768,
  large: 1440
};

ReactDOM.render(
  // Overwrite breakpoints here, by passing your breakpoints constant
  <HideAt breakpoint="mediumAndBelow" breakpoints={ breakpoints }>
    <p>Hello world!</p>
  </HideAt>,
  document.getElementById('app')
);
```

## Contributions

If you'd like to help, feel free to post an issue and have a discussion about your suggestions!

## Background story

**Skip this section, if you aren't interested.**

As I was reading Adam Neary's article of [Rearchitecting Airbnb’s Frontend](https://medium.com/airbnb-engineering/rearchitecting-airbnbs-frontend-5e213efc24d2), two components caught my attention as a junior frontend developer. These were `HideAt` and `ShowAt`, these components seemed to me easy to 'reverse engineer' 🤓 for a rookie like me, but as it turned I needed to create a HOC as well to be able to share the above two with you, the react community. [Airbnb's website](https://aribnb.com) and the [React dev tool](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi) helped me with inspiration along the way.

## Licence
MIT

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