Coder Social home page Coder Social logo

chernandez7 / react-native-search-filter Goto Github PK

View Code? Open in Web Editor NEW

This project forked from mjsolidarios/react-native-search-filter

0.0 2.0 0.0 372 KB

Modified version of react-search-input (https://github.com/enkidevs/react-search-input) to work with react-native.

JavaScript 56.75% Python 10.61% Java 8.63% Objective-C 24.01%

react-native-search-filter's Introduction

React Native Search Filter

React Native search component with filter function.

Getting Started

Installation

Using npm:

$ npm install react-native-search-filter --save

Using yarn:

$ yarn add react-native-search-filter

Example Usage

Complete example available here.

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TouchableOpacity } from 'react-native';
import SearchInput, { createFilter } from 'react-native-search-filter';
import emails from './mails';
const KEYS_TO_FILTERS = ['user.name', 'subject'];

export default class App extends Component<{}> {
 constructor(props) {
    super(props);
    this.state = {
      searchTerm: ''
    }
  }
  searchUpdated(term) {
    this.setState({ searchTerm: term })
  }
  render() {
    const filteredEmails = emails.filter(createFilter(this.state.searchTerm, KEYS_TO_FILTERS))
    return (
      <View style={styles.container}>
        <SearchInput 
          onChangeText={(term) => { this.searchUpdated(term) }} 
          style={styles.searchInput}
          placeholder="Type a message to search"
          />
        <ScrollView>
          {filteredEmails.map(email => {
            return (
              <TouchableOpacity onPress={()=>alert(email.user.name)} key={email.id} style={styles.emailItem}>
                <View>
                  <Text>{email.user.name}</Text>
                  <Text style={styles.emailSubject}>{email.subject}</Text>
                </View>
              </TouchableOpacity>
            )
          })}
        </ScrollView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    justifyContent: 'flex-start'
  },
  emailItem:{
    borderBottomWidth: 0.5,
    borderColor: 'rgba(0,0,0,0.3)',
    padding: 10
  },
  emailSubject: {
    color: 'rgba(0,0,0,0.5)'
  },
  searchInput:{
    padding: 10,
    borderColor: '#CCC',
    borderWidth: 1
  }
});

API and Configuration

Property Type Default Description
caseSensitive boolean false Define if the search should be case sensitive.
clearIcon Node null Optional clear icon.
clearIconViewStyles Style {position:absolute',top: 18,right: 22} Optional styles for the clear icon view.
filterKeys string or [string] Will be use by the filter method if no argument is passed there.
fuzzy boolean false Define if the search should be fuzzy.
inputViewStyles Style Optional styles for the input container.
onChangeText Function Required Function called when the search term is changed (will be passed as an argument).
sortResults boolean false Define if search results should be sorted by relevance (only works with fuzzy search).
throttle number 200 Reduce call frequency to the onChange function (in ms).
onSubmitEditing function () => {} Defines a function for the keyboard search button onPress.
inputFocus boolean false Defines whether the field receives focus.
returnKeyType string done Determines how the return key should look. The following values work across platforms: done, go, next, search, send

Methods

filter([keys])

Return a function which can be used to filter an array. keys can be string, [string] or null.

If an array keys is an array, the function will return true if at least one of the keys of the item matches the search term.

Static Methods

filter(searchTerm, [keys], [{caseSensitive, fuzzy, sortResults}])

Return a function which can be used to filter an array. searchTerm can be a regex or a String. keys can be string, [string] or null.

If an array keys is an array, the function will return true if at least one of the keys of the item matches the search term.

Known Issues

Hide clearIcon if search input is empty.

Provided you have a custom icon package, a short toggle method for the property will do: clearIcon={this.state.searchTerm!==''&&<Icon name="x"/>}.

Fuse.js: Unknown plugin "babel-plugin-add-module-exports"

Add babel-plugin-add-module-exports as a dev dependency. Fuse.js #154.

npm i babel-plugin-add-module-exports babel-preset-es2015 babel-preset-stage-2 --save-dev

Acknowledgement

enkidevs - Simple react.js component for a search input, providing a filter function .

react-native-search-filter's People

Contributors

jobijoba avatar mjsolidarios avatar northeda avatar pauljordaan avatar sgtwinters avatar valterson avatar yarkhan avatar

Watchers

 avatar  avatar

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.