# bpk-react-utils-css

> Utilities for Backpack's React components.

Latest version **4.1.1** (published 2022-04-04) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install bpk-react-utils-css
pnpm add bpk-react-utils-css
yarn add bpk-react-utils-css
bun add bpk-react-utils-css
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 4.1.1 |
| Published | 2022-04-04 |
| First published | 2020-07-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 52.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 543 |
| Author | Backpack Design System |
| Maintainers | k0nserv, shaundon, georgegillams, tiagohngl, ojcurt |

## Links

- npm: https://www.npmjs.com/package/bpk-react-utils-css
- Repository: https://github.com/Skyscanner/backpack
- Homepage: https://github.com/Skyscanner/backpack#readme
- Issues: https://github.com/Skyscanner/backpack/issues
- npm.io page: https://npm.io/package/bpk-react-utils-css

## Dependencies (3)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [object-assign](https://npm.io/package/object-assign.md) ^4.1.1
- [react-transition-group](https://npm.io/package/react-transition-group.md) ^2.5.3

## Recent versions

- 4.1.1 (latest) — 2022-04-04
- 4.1.0 — 2022-03-02
- 4.0.2 — 2022-02-02
- 4.0.1 — 2021-09-13
- 4.0.0 — 2021-06-16
- 3.1.3 — 2021-06-15
- 3.1.1 — 2021-06-15
- 3.1.0 — 2021-04-09
- 3.0.13 — 2021-04-03
- 3.0.12 — 2021-04-02
- 3.0.11 — 2021-01-13
- 3.0.10 — 2021-01-08
- 3.0.9 — 2020-12-17
- 3.0.8 — 2020-12-11
- 3.0.7 — 2020-10-20
- … 5 more at https://npm.io/package/bpk-react-utils-css/versions

## README

# bpk-react-utils

> Miscellaneous React based utilities for use in Backpack components.

## Installation

```sh
npm install bpk-react-utils --save-dev
```

## Portal.js

Render's children into a new component tree and appends it to `document.body`. Useful for Modals, Popovers, Tooltips etc where
it's necessary in overcoming z-index issues when absolutely positioning elements.

### Usage

```js
import { Portal } from 'bpk-react-utils';
import BpkButton from 'bpk-component-button';
import { BpkCode } from 'bpk-component-code';
import React, { Component } from 'react';

class MyComponent extends Component {
  constructor() {
    super();

    this.state = {
      isOpen: false,
    };

  }

  onOpen = () => {
    this.setState({
      isOpen: true,
    });
  }

  onClose = () => {
    this.setState({
      isOpen: false,
    });
  }

  render() {
    return (
      <div>
        <BpkButton onClick={this.onOpen}>Open portal</BpkButton>
        <Portal
          isOpen={this.state.isOpen}
          onClose={this.onClose}
        >
          <div>I'm now appended to <BpkCode>document.body</BpkCode></div>
        </Portal>
      </div>
    );
  }
}
```

### Props

| Property              | PropType                | Required | Default Value |
| --------------------- | ----------------------- | -------- | ------------- |
| children              | node                    | true     | -             |
| isOpen                | bool                    | true     | -             |
| beforeClose           | func                    | false    | null          |
| onClose               | func                    | false    | noop          |
| onOpen                | func                    | false    | noop          |
| onRender              | func                    | false    | noop          |
| renderTarget          | func                    | false    | null          |
| target                | oneOf([function, node]) | false    | null          |
| closeOnEscPressed     | bool                    | false    | true          |

## `cssModules.js`

A helpful utility which permits backwards compatibility with hard coded classes and [CSS modules](https://github.com/css-modules/css-modules).

### Usage

```js
import React from 'react';
import { cssModules } from 'bpk-react-utils';

import STYLES from './MyComponent.scss';

const getClassName = cssModules(STYLES);

const MyComponent = (props) => (
  <div className={getClassName('MyComponent')}>
    <div className={getClassName('MyComponent__inner')}>
      {props.children}
    </div>
  </div>
);
```

With CSS modules:

```html
<div class="_35WloynrPDta8fhSfoHEgE">
  <div class="_1ghNYY7jOYzUneVCT4piQ9">
    Some text.
  </div>
</div>
```

Without CSS modules:

```html
<div class="MyComponent">
  <div class="MyComponent__inner">
    Some text.
  </div>
</div>
```

The returned function accepts multiple class names and ignores values other than strings. e.g:

```js
import { cssModules } from 'bpk-react-utils';

import STYLES from './MyComponent.scss';

const getClassNames = cssModules(STYLES);

const MyComponent = (props) => (
  <div className={getClassName('MyComponent', props.disabled && 'MyComponent--disabled')}>
   {props.children}
  </div>
);
```

Will result in `MyComponent MyComponent--disabled` if `props.disabled` is true or `MyComponent` otherwise.

## `TransitionInitialMount.js`

A wrapper around `react-transition-group` which makes it easy to transition a
components initial mount. All you need to provide is two class names and a timeout.

### Usage

```js
import React from 'react';
import { TransitionInitialMount } from 'bpk-react-utils';

const MyComponent = (props) => (
  <TransitionInitialMount
    appearClassName="my-transition-class--appear"
    appearActiveClassName="my-transition-class--appear-active"
    transitionTimeout={300}
  >
    <div>Some text.</div>
  </TransitionInitialMount>
);
```

```scss
@import '~bpk-mixins/index';

.my-transition-class {
  transition: opacity $bpk-duration-sm ease-in-out;
  opacity: 1;

  &--appear {
    opacity: 0;
  }

  &--appear-active {
    opacity: 1;
  }
}
```

### Props

| Property              | PropType | Required | Default Value |
| --------------------- | -------- | -------- | ------------- |
| children              | node     | true     | -             |
| appearClassName       | string   | true     | -             |
| appearActiveClassName | string   | true     | -             |
| transitionTimeout     | number   | true     | -             |

## `isRTL`

Returns true if the browser is showing content right-to-left.

### Usage

```js
import React from 'react';
import { isRTL } from 'bpk-react-utils';

if (isRTL()) {
  // do RTL stuff
} else {
  // do LTR stuff
}
```

## `isDeviceIphone`

Returns true if the device is an iPhone.

### Usage

```js
import React from 'react';
import { isDeviceIphone } from 'bpk-react-utils';

if (isDeviceIphone()) {
  // do iPhone specific stuff
} else {
  // do other browser/device stuff
}
```

## `isDeviceIpad`

Returns true if the device is an iPad.

### Usage

```js
import React from 'react';
import { isDeviceIpad } from 'bpk-react-utils';

if (isDeviceIpad()) {
  // do iPad specific stuff
} else {
  // do other browser/device stuff
}
```

## `isDeviceIos`

Returns true if the platform is iOS (iPhone/iPad).

### Usage

```js
import React from 'react';
import { isDeviceIos } from 'bpk-react-utils';

if (isDeviceIos()) {
  // do iOS specific stuff
} else {
  // do other browser/device stuff
}
```

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