greet-greet v2.0.14

Custom Drop Down

Custom DropDown(Greet-Greet) 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

Props

Explanation:

• Key Properties: The table now clearly outlines the features and their descriptions.
• Installation: Instructions are provided for both npm and Yarn.
• API Reference: Detailed prop information is included for developers to understand the customization options available.
• License & Contributions: Standard sections for open-source contributions and licensing.

Usage

The snippet below shows how the component can be used:

import CustomDropDown from 'greet-greet';

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

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

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>      
      <CustomDropDown
        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) => <Icon name="close" />}
      />
    </View>
  );
};

export default App;

Installation

You can install Greet-Greet via npm or Yarn:

# Using npm
npm install greet-greet

# Using Yarn
yarn add greet-greet