{"size": 719, "ext": "js", "max_stars_repo_path": "src/components/search/search-box.js", "max_stars_repo_name": "k-xiang/gatsby-blog", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/search/search-box.js", "max_issues_repo_name": "k-xiang/gatsby-blog", "max_issues_repo_issues_event_min_datetime": "2022-02-09T10:55:20.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-21T06:41:30.000Z", "max_forks_repo_path": "src/components/search/search-box.js", "max_forks_repo_name": "zkfivy/gatsby-blog", "max_forks_repo_forks_event_min_datetime": "2021-12-29T09:31:51.000Z", "max_forks_repo_forks_event_max_datetime": "2022-02-15T12:01:38.000Z"}
{"max_stars_count": null, "max_issues_count": 6, "max_forks_count": 2, "avg_line_length": 27.6538461538, "max_line_length": 74, "alphanum_fraction": 0.6230876217}
import React, { useRef, useEffect } from 'react';
import { connectSearchBox } from 'react-instantsearch-dom';
import { Search2 as SearchIcon } from '@styled-icons/remix-fill/Search2';

export default connectSearchBox(({ show, refine, currentRefinement }) => {
  const inputRef = useRef(null);

  useEffect(() => {
    show && inputRef.current && inputRef.current.focus();
  }, [show]);

  return (
    <form className="search-box">
      <SearchIcon className="icon" />
      <input
        placeholder="Search by algolia"
        className="search-input"
        type="text"
        onChange={(e) => refine(e.target.value)}
        value={currentRefinement}
        ref={inputRef}
      ></input>
    </form>
  );
});
