dropmate-rn

DropMate

DropMate is a flexible and customizable multi-select dropdown component for React Native. Designed for simplicity and performance, it provides developers with an intuitive way to implement multi-selection functionality in their applications. It supports dynamic styling, custom rendering, and is easy to integrate into existing projects.

Features

• 🖌️ Custom Rendering: Fully customize the input, dropdown items, and selected items.
• 🎨 Dynamic Styling: Easily apply styles to seamlessly match your app’s theme.
• 🚀 Lightweight and Fast: Minimal dependencies and optimized for performance.
• 🔄 Add New Items: Dynamically add new items directly from the dropdown.
• 🧩 Extensive Control: Configure selection limits, handle custom behavior, and more.

Key Properties

Feature	Description
Ease of Use	Simple to set up and use, with minimal configuration required.
Customizability	Supports custom input fields, dropdown items, and close icons.
Performance	Optimized to handle large datasets and mobile performance constraints.
Dynamic Updates	Allows adding new items dynamically when no matches are found.
Cross-Platform	Works seamlessly across React Native environments (Android and iOS).
Extensibility	Highly configurable with custom render functions and event callbacks.
Comprehensive Docs	Detailed documentation with examples and usage guides.

Props

Prop Name	Type	Default	Description
data	array	[]	List of items to display in the dropdown.
placeholder	string	"Search or add category"	Placeholder text for the input field.
maxSelectable	number	5	Maximum number of items a user can select.
onSelect	func	() => {}	Callback function triggered when items are selected.
renderInput	func	null	Custom render function for the input field.
renderDropdownItem	func	null	Custom render function for dropdown items.
renderAddItem	func	null	Custom render function for the "Add Item" option.
renderCloseIcon	func	null	Custom render function for the close icon in selected items.

Usage

import React, { useState } from 'react';
import { View, Text, TextInput } from 'react-native';
import DropMate from 'dropmate-rn';

const App = () => {
  const [selectedItems, setSelectedItems] = useState([]);

  const handleSelect = (selected) => {
    setSelectedItems(selected);
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <DropMate
        data={['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']}
        placeholder="Select items"
        maxSelectable={3}
        onSelect={handleSelect}
        renderInput={(props) => <TextInput {...props} />}
        renderDropdownItem={(item) => <Text>{item}</Text>}
        renderAddItem={(props) => <Text {...props}>Add Item</Text>}
        renderCloseIcon={(item) => <Text>✕</Text>}
      />
    </View>
  );
};

export default App;

Installation

# Using npm
npm install dropmate-rn

# Using Yarn
yarn add dropmate-rn