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

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

Username
          
        
        
          Password
          
        
        
          Login
        
      
    );
  }
}

View more ways to use bpk-component-input

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 () => (
   console.log('input changed!')}
    placeholder="Country, city or airport"
    clearButtonMode={CLEAR_BUTTON_MODES.whileEditing}
    clearButtonLabel="Clear"
    onClear={() => console.log('input cleared!')}
  />
);

Props

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.

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 (
       null}
          />
        }
        onClose={this.onClose}
        isOpen={this.state.isOpen}
        label="Popover"
        closeButtonText="Close"
      >
        A popover!
      
    );
  }
}