bpk-component-input-css

Backpack input component.

Usage no npm install needed!

<script type="module">
  import bpkComponentInputCss from 'https://cdn.skypack.dev/bpk-component-input-css';
</script>

README

bpk-component-input

Backpack input component.

Installation

npm install bpk-component-input --save-dev

Usage

import React from 'react';
import BpkInput, { INPUT_TYPES, CLEAR_BUTTON_MODES } from 'bpk-component-input';

export default () => (
  <BpkInput
    id="origin"
    type={INPUT_TYPES.text}
    name="origin"
    value="Edinburgh"
    onChange={() => console.log('input changed!')}
    placeholder="Country, city or airport"
    clearButtonMode={CLEAR_BUTTON_MODES.whileEditing}
    clearButtonLabel="Clear"
    onClear={() => console.log('input cleared!')}
  />
);

Props

Property PropType Required Default Value
id string true -
name string true -
type INPUT_TYPES (one of) false INPUT_TYPES.text
value string true -
clearButtonMode CLEAR_BUTTON_MODES (one of) false CLEAR_BUTTON_MODES.never
clearButtonLabel string if clearable={true} null
dockedFirst bool false false
dockedLast bool false false
dockedMiddle bool false false
inputRef func false null
large bool false false
onClear func if clearable={true} null
valid bool false null

Additionally, all native <input /> attributes such as placeholder and onChange are supported.

Note: When clearButtonMode is set to always, validity icons will not appear.

withOpenEvents

The withOpenEvents higher-order component encapsulates input event handlers for opening popovers or modals.

The onOpen callback is called on the following events:

  • click
  • focus
  • touchend
  • keydown (Enter key)
  • keyup (Space key)

You can still attach custom handlers for these events as they will still be called. All other key events are prevented.

It is important you pass the isOpen prop, as it is necessary to work around an IE bug.

Property PropType Required Default Value
isOpen bool false false
onOpen func false null
hasTouchSupport bool false (feature detection)
import React from 'react';
import BpkInput, { withOpenEvents } from 'bpk-component-input';
import BpkPopover from 'bpk-component-popover';

const EnhancedInput = withOpenEvents(BpkInput);

export default () => {
  constructor() {
    super();

    this.state = { isOpen: false };
  }

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

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

  render() {
    return (
      <BpkPopover
        id="popover"
        target={
          <EnhancedInput
            id="input"
            value="An input?"
            isOpen={this.state.isOpen}
            onOpen={this.onOpen}
            onChange={() => null}
          />
        }
        onClose={this.onClose}
        isOpen={this.state.isOpen}
        label="Popover"
        closeButtonText="Close"
      >
        A popover!
      </BpkPopover>
    );
  }
}