react-combo-search v1.1.4

react-combo-search

React component encapsulating the logic for filtering with select dropdown and text / dates. Comes with react-combo-select and react-datetime out of the box, but can take render props for select and date picker so you are not forced to use these two packages.

Usability

Peer dependencies: React and react-dom. Optional dependencies: react-combo-select, react-datetime *font-awesome(peer of react-combo-select) and moment(peer of react-datetime)

import { ComboSearch } from 'react-combo-search';

and include css file (you may include this in different way) *if you use react-combo-select and react-datetime you are gonna need their css also

require('../node_modules/react-combo-search/css/style.css');

Demo

We prepared code sandbox demo. Unfortunately, we haven't found the time to add some generic data for you to filter, but you can freely play around with component ot get the feel of what it does. See demo here

props/options

onSearch and selectData

There are two mandatory props: first one is "onSearch" which gets fired on submit. Second one is "selectData", which is a required prop in react-combo-select and populates select with options

import React, {Component} from 'react';
import ComboSearch from 'react-combo-search';
// You should not forget to include css

export default class FakeComponent extends Component {

	constructor(props) {
		super(props);

		this.searchCallback = this.searchCallback.bind(this);
	}

	searchCallback(data) {
		console.log(data);
		// you may do something with form data here
		// like call API by async action creator, do client side filtering
		// and transform the data first if you need it in slightly different format
	}

	render() {
		return (
			<div>
				<ComboSearch
					onSearch={this.searchCallback}
					selectData={['Name', 'Surname', 'Title', 'Date of birth']}
					datePickerCriteria='Date of birth'
				/>
			</div>
		);
	}
}

classNames

If you decide on using existing components, you may want to style them differently. You can also pass any prop to style these two in additionalSelectProps and additionalDatePickerProps, see next table.

All props

Customizing and contributing

You can contact us in case you need some feature or want to contribute, but keep in mind we don't want to go overboard with trying to make this component a "swiss knife". It's possible that you may need additional className props, we haven't fully tested custom styling. Feel free to contact us should that be a case. You can also freely fork and play around with the project.