To help you get started, we've collected the most common ways that bpk-react-utils is being used within popular public projects.

Skyscanner / backpack / packages / bpk-docs / src / pages / ColorsPage / ColorsPage.js View on Github

import STYLES from './colors-page.scss';

import Heading from '../../components/Heading';
import ColorSwatch from '../../components/ColorSwatch';
import DocsPageBuilder from '../../components/DocsPageBuilder';

/* eslint-disable import/no-webpack-loader-syntax */
const coreRgbAse = require('!!file-loader?name=[name].[hash].ase!./../../static/core_rgb.ase');

const coreRgbClr = require('!!file-loader?name=[name].[hash].clr!./../../static/core_rgb.clr');

const extendedRgbAse = require('!!file-loader?name=[name].[hash].ase!./../../static/extended_rgb.ase');

const extendedRgbClr = require('!!file-loader?name=[name].[hash].clr!./../../static/extended_rgb.clr');

const getClassName = cssModules(STYLES);
const containerClassName = getClassName(
  'bpkdocs-colors-page__swatch-container',
);

const components = [
  {
    id: 'primary',
    title: 'Primary',
    blurb: [
      <div>
        
        </div>

View more ways to use bpk-react-utils

bpk-react-utils

> Miscellaneous React based utilities for use in Backpack components.

Installation

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

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>
        Open portal
        
          <div>I'm now appended to document.body</div>
        
      </div>
    );
  }
}

Props

cssModules.js

A helpful utility which permits backwards compatibility with hard coded classes and CSS modules.

Usage

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

import STYLES from './MyComponent.scss';

const getClassName = cssModules(STYLES);

const MyComponent = (props) => (
  <div>
    <div>
      {props.children}
    </div>
  </div>
);

With CSS modules:

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

Without CSS modules:

<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:

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

import STYLES from './MyComponent.scss';

const getClassNames = cssModules(STYLES);

const MyComponent = (props) => (
  <div>
   {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

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

const MyComponent = (props) => (
  
    <div>Some text.</div>
  
);

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

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

  &--appear {
    opacity: 0;
  }

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

Props

isRTL

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

Usage

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

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

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

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

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