Giter Site home page Giter Site logo

asyncfinkd / react-search Goto Github PK

View Code? Open in Web Editor NEW
15.0 1.0 2.0 836 KB

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

License: MIT License

HTML 3.58% JavaScript 64.18% CSS 31.90% Shell 0.34%
js javascript package search react reactjs form forms search-engine search-interface

react-search's Introduction

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

react-search's People

Contributors

asyncfinkd avatar ninja-google avatar veu-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

react-search's Issues

Why i using 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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.