Skip to content

This package will help you create a pretty good and beautiful search. And other related features

License

Notifications You must be signed in to change notification settings

asyncfinkd/react-search

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React-Search

Why i using react-search?

  • The first reason for using it is that it is open source
  • Updates happen frequently. There is constant news
  • Easy to use. Files are sorted for more information content/filestructure.yml
  • We usually use CSS. No frameworks and support packages
  • Fast loading and fast action

Input without result, searched


Input with list


Input With Searched

The example below ensures that all items in JSON are retrieved and sorted by search. You will notice a strange removeItem pointer performing a deletion of an item in JSON. Depending on which one the user chooses to search. react-search is not a framework nor a package it is a simple code that helps you not to rewrite the same code several times in different projects

{
  renderData.length > 0 && (
    <div className="container-searchList">
      {renderData
        .filter((val) => {
          if (val.title.toLowerCase().includes(input.toLowerCase())) {
            return val;
          }
        })
        .map((item) => {
          const { id } = item;
          return (
            <>
              <SearchChildList {...item} removeItem={() => removeItem(id)} />
            </>
          );
        })}
    </div>
  );
}

In the example below we will process a popup and we will indicate that it will process the photo, name, and ID. Hopefully the code is very easy to write and easy to modify and is built entirely on the 2 useState method. Which handles the entire code.

<div className="content-searchList" key={id}>
  <div className="flex">
    <img src={image} alt={title} className="content-image-searchList" />
    <p className="mleft">{title}</p>
  </div>
  <div>
    <button className="close-btn" onClick={removeItem}>
      ×
    </button>
  </div>
</div>

Contributing

The main purpose of this repository is to continue evolving React Search core, making it faster and easier to use. Development of React Search happens in the open on GitHub, and we are grateful to the community for contributing bugfixes and improvements. Read below to learn how you can take part in improving React Search.

React Search has adopted a Code of Conduct that we expect project participants to adhere to. Please read the full text so that you can understand what actions will and will not be tolerated.

Read our contributing guide to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to React Search.

License

React Search is MIT licensed

Releases

No releases published

Sponsor this project

Packages

No packages published