@alliance-software-development/react-search-module

A React component for search.

Installation

For Native this module depends on nothing means no dependency require so, just 1 below step require to install it.

Note: to use this module on web, you have to install react-native-web

npm install @alliance-software-development/react-search-module

or

yarn add @alliance-software-development/react-search-module

Usage

import ASDSearch from '@alliance-software-development/react-search-module';

For Native

import React from 'react';
import {Dimensions, SafeAreaView, StyleSheet, Text, View} from 'react-native';

import ASDSearch from '@alliance-software-development/react-search-module';

const data = [
  {
    studioType: 'music',
    zipCode: '74886',
    thresholdDays: 2,
    name: 'music pool',
    phoneNumber: 7036979103,
    address: '707 Continental Cir, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 100,
    },
  },
  {
    studioType: 'music',
    zipCode: '122',
    thresholdDays: 2,
    name: 'music ranty',
    phoneNumber: 7036979103,
    address: '707 Mac Book, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 100,
    },
  },
  {
    studioType: 'photo',
    thresholdDays: 2,
    name: 'photo iconic',
    phoneNumber: 7036979103,
    address: '500 Phot Bum str, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 10,
    },
  },
  {
    studioType: 'video',
    thresholdDays: 2,
    name: 'videp pool',
    phoneNumber: 7036979103,
    address: '300 Lam Sink, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 50,
    },
  },
];

const App = () => {
  const dataView = ({item, index}) => {
    return (
      <View key={index} style={[styles.dataViewStyle, styles.shadowProp]}>
        <View>
          <Text style={styles.title}>{item.name}</Text>
          <Text style={styles.subtitle}>
            Starting @ ${item.service.price}/hr
          </Text>
          <Text numberOfLines={2} style={styles.desc}>
            {item.address}
          </Text>
        </View>
        <View style={styles.box} />
      </View>
    );
  };

  const renderSearchHeader = searchCount => {
    return (
      <View style={styles.center}>
        <Text style={[styles.title, {color: 'midnightblue'}]}>
          Quick Search Result {searchCount}
        </Text>
      </View>
    );
  };
  return (
    <SafeAreaView style={{flex: 1}}>
      <ASDSearch
        data={data}
        dataView={dataView}
        renderSearchHeader={renderSearchHeader}
        searchBy={['address', 'name', 'studioType', 'service.price']}
        dataViewContainerStyle={styles.dataViewContainerStyle}
        searchInputStyle={styles.searchInputStyle}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  center: {
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  searchInputStyle: {
    alignSelf: 'center',
    backgroundColor: 'lightgray',
    height: 45,
    borderRadius: 10,
    borderWidth: 0,
    marginBottom: 20,
  },
  dataViewStyle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
    minHeight: 100,
    minWidth: Dimensions.get('window').width - 25,
    margin: 10,
    borderRadius: 10,
    backgroundColor: '#fff',
  },
  dataViewContainerStyle: {
    flex: 1,
    flexDirection: 'column',
  },
  title: {
    fontSize: 18,
    fontWeight: '500',
    textTransform: 'capitalize',
  },
  subtitle: {
    fontSize: 15,
    fontWeight: '500',
  },
  desc: {
    fontSize: 14,
    fontWeight: '300',
    color: 'gray',
    letterSpacing: 1,
    marginTop: 20,
    width: 210,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  box: {
    backgroundColor: 'gray',
    height: 70,
    width: 70,
    borderRadius: 8,
    alignSelf: 'center',
  },
  shadowProp: {
    shadowColor: '#171717',
    shadowOffset: {width: -2, height: 4},
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
  elevation: {
    elevation: 20,
    shadowColor: '#52006A',
  },
});

export default App;

Usage on Web

import React from 'react';

import ASDSearch from '@alliance-software-development/react-search-module';

const data = [
  {
    studioType: 'music',
    zipCode: '74886',
    thresholdDays: 2,
    name: 'music pool',
    phoneNumber: 7036979103,
    address: '707 Continental Cir, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 100,
    },
  },
  {
    studioType: 'music',
    zipCode: '122',
    thresholdDays: 2,
    name: 'music ranty',
    phoneNumber: 7036979103,
    address: '707 Mac Book, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 100,
    },
  },
  {
    studioType: 'photo',
    thresholdDays: 2,
    name: 'photo iconic',
    phoneNumber: 7036979103,
    address: '500 Phot Bum str, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 10,
    },
  },
  {
    studioType: 'video',
    thresholdDays: 2,
    name: 'videp pool',
    phoneNumber: 7036979103,
    address: '300 Lam Sink, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 50,
    },
  },
];

const styles = {
  center: {
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 10,
  },
  searchInputStyle: {
    alignSelf: 'center',
    backgroundColor: 'lightgray',
    height: 45,
    borderRadius: 10,
    borderWidth: 0,
    marginBottom: 20,
  },
  dataViewStyle: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingHorizontal: 15,
    minHeight: 100,
    minWidth: 300,
    margin: 10,
    borderRadius: 10,
    backgroundColor: '#fff',
  },
  dataViewContainerStyle: {
    flex: 1,
    flexDirection: 'column',
  },
  title: {
    fontSize: 18,
    fontWeight: '500',
    textTransform: 'capitalize',
  },
  subtitle: {
    fontSize: 15,
    fontWeight: '500',
  },
  desc: {
    fontSize: 14,
    fontWeight: '300',
    color: 'gray',
    letterSpacing: 1,
    marginTop: 20,
    width: 210,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  box: {
    backgroundColor: 'gray',
    height: 70,
    width: 70,
    borderRadius: 8,
    alignSelf: 'center',
  },
  shadowProp: {
    shadowColor: '#171717',
    shadowOffset: {width: -2, height: 4},
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
}

const App = () => {
  const dataView = ({item, index}) => {
    return (
      <div key={index} style={[styles.dataViewStyle, styles.shadowProp]}>
        <div>
          <h1 style={styles.title}>{item.name}</h1>
          <p style={styles.subtitle}>
            Starting @ ${item.service.price}/hr
          </p>
          <span numberOfLines={2} style={styles.desc}>
            {item.address}
          </span>
        </div>
        <div style={styles.box} />
      </div>
    );
  };

  const renderSearchHeader = searchCount => {
    return (
      <div style={styles.center}>
        <h2 style={[styles.title, {color: 'midnightblue'}]}>
          Quick Search Result {searchCount}
        </h2>
      </div>
    );
  };
  return (
    <div style={{flex: 1}}>
      <ASDSearch
        data={data}
        dataView={dataView}
        renderSearchHeader={renderSearchHeader}
        searchBy={['address', 'name', 'studioType', 'service.price']}
        dataViewContainerStyle={styles.dataViewContainerStyle}
        searchInputStyle={styles.searchInputStyle}
      />
    </div>
  );
};


export default App;

Props

ASDSearch component accepts following props.

Name | Type| Default | Is Require --- | --- | --- | --- data | [] of {} | - | Yes searchBy | [] of Strings | - | Yes dataView | Func | - | Yes renderSearchHeader | Func | - | No searchInputProps | {} | - | No dataViewContainerStyle | {} | - | No searchInputStyle | {} | - | No

Props Explanation

Data List of Objects

Data must be List of Objects where each object will represent a View.

  
  //List of Objects
  [{
    studioType: 'video',
    thresholdDays: 2,
  }, ...]
  
  //For Example
  data={[{
    studioType: 'video',
    thresholdDays: 2,
    name: 'videp pool',
    phoneNumber: 7036979103,
    address: '300 Lam Sink, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 50,
    },
  }, ... ]}
  

searchBy List of Strings

By Default ASDSearch searches by all the Data props.

  
  //List of Strings
  ['city', 'zipcode', 'name', 'price']
  
  //Note
  //Data prop must have Object keys same/match the Data item.  
  

dataView Function ASDSearch passes each item with its index in Object in which can display, with full flexibity.

Below is the shape of Objects.

//Function Shape
const dataView = ({item, index}) => {
    return (
      <View key={index} style={[styles.dataViewStyle, styles.shadowProp]}>
        <View>
          <Text style={styles.title}>{item.name}</Text>
          <Text style={styles.subtitle}>
            Starting @ ${item.service.price}/hr
          </Text>
          <Text numberOfLines={2} style={styles.desc}>
            {item.address}
          </Text>
        </View>
        <View style={styles.box} />
      </View>
    );
  };
        

renderSearchHeader Function ASDSearch passes search result count.

Below is the shape of Objects.

//Function Shape
 const renderSearchHeader = searchCount => {
    return (
      <View style={styles.center}>
        <Text style={[styles.title, {color: 'midnightblue'}]}>
          Quick Search Result {searchCount}
        </Text>
      </View>
    );
  };

searchInputProps Object

Search input props, just a wrapper around react native TextInput

e.g. 
{
    placeholder: 'Search by name, zipcode...',
    onTextChange: ()=>{}

}

dataViewContainerStyle Object

dataView container styles

e.g. 
{
   flex: 1,
   flexDirection: 'column',
},

searchInputStyle Object

Search input styles

e.g.
{
    alignSelf: 'center',
    backgroundColor: 'lightgray',
    height: 45,
    borderRadius: 10,
    borderWidth: 0,
    marginBottom: 20,
  }