bisu-react-search-modal

React Search Modal similar to Spotlight.

Installation

npm install --save bisu-react-search-modal
then include this scss file to your main scss

@import '~bisu-react-modal/lib/style.scss'; @import '~bisu-react-search-modal/lib/style.scss';

Usage

import React, { Component } from 'react'
import SearchModal from 'bisu-react-search-modal'

class ShowModal extends Component {

  constructor(props) {
    super(props)
    this.state = {
      showModal: false,
    }
  }

  _onSubmit = (term) => {
    alert('You searched for: ', term)
  }

  render() {
    const { showModal } = this.state

    return (
      <div>
        <button type="button" onClick={() => this.setState({ showModal: true })}>Show SearchModal</button>
        <SearchModal
          placeholder="Search term"
          handleClose={() => this.setState({ showModal: false })}
          isOpen={showModal}
          onSubmit={this._onSearch}
        >
          <div>Search results here.</div>
        </SearchModal>
      </div>
    )
  }
}