Package Exports

react-redux-entry-input

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-redux-entry-input) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-enty-input

Extremely simple react component, in which user can add entries from given immutable set. Provides suggestions as user types. demo

Installation

npm install --save react-redux-entry-input

Usage

import React from 'react';
import {connect} from 'react-redux';

import EntryInput from 'react-redux-entry-input';

import {
  addEntry,
  removeEntry,
} from './actions.js';

const mapStateToProps = state => {
  const entries = state.get('entries');
  const colors = state.get('colors');
  return {
    entries,
    colors
  };
};

export class Example extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <EntryInput
          actionAddEntryToState={this.props.addEntry}
          actionRemoveEntryFromState={this.props.removeEntry}
          entries={this.props.entries}
          minQueryLength={2}
          suggestions={this.props.colors}
      />
    );
  }
}

export const ExampleContainer = connect(
  mapStateToProps, {
    addEntry,
    removeEntry
  }
)(Example);

Props

###EntryInput #####actionAddEntryToState: React.PropTypes.func.isRequired Action which is used to add values to store when user adds new entries to input from suggestions. #####actionRemoveEntryFromState: React.PropTypes.func.isRequired Action which is used to remove values from store when user decides to remove entries. #####entries: React.PropTypes.object.isRequired Variable, which contains entries added by user Requires immutable type #####minQueryLength: React.PropTypes.number Mininum amount of characters typed to display suggestions defaults to 1 #####nameVariable: React.PropTypes.string defaults to 'name' #####newTagOn: React.PropTypes.array Pressing these keys will trigger actionAddEntryToState defaults to [13, 9] (enter and tab key) #####placeholder: React.PropTypes.string placeholder on the input field defaults to entries #####suggestions: React.PropTypes.object.isRequired Only these values can be entered to input field by the user

Other

Suggestions and/or Entries component can be used separately (e.g. to list entries somewhere else)
See demo-style.css for example on styling the component