0.3.2 • Published 9 years ago

react-redux-entry-input v0.3.2

Weekly downloads
3
License
MIT
Repository
github
Last release
9 years ago

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
0.3.2

9 years ago

0.3.1

9 years ago

0.3.0

9 years ago

0.2.1

10 years ago

0.2.0

10 years ago

0.1.5

10 years ago

0.1.4

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago