Installations
npm install @zooshgroup/react-native-multiple-selectDeveloper Guide
Typescript
No
Module System
CommonJS
Node Version
8.9.0
NPM Version
6.0.0
Score
31.4
Supply Chain
77.6
Quality
71.7
Maintenance
25
Vulnerability
75
License
Releases
Unable to fetch releases
Contributors
Unable to fetch Contributors
Languages
JavaScript (100%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
zooshgroup
Download Statistics
Total Downloads
6,859
Last Day
2
Last Week
14
Last Month
55
Last Year
432
GitHub Statistics
2 Stars
92 Commits
1 Forks
5 Watching
3 Branches
1 Contributors
Maintainers
Package Meta Information
Latest Version
0.2.26
Package Id
@zooshgroup/react-native-multiple-select@0.2.26
Unpacked Size
140.67 kB
Size
40.70 kB
File Count
12
NPM Version
6.0.0
Node Version
8.9.0
Total Downloads
Cumulative downloads
Total Downloads
6,859
Last day
0%
2
Compared to previous day
Last week
100%
14
Compared to previous week
Last month
816.7%
55
Compared to previous month
Last year
-55.1%
432
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
react-native-multiple-select
Simple multi-select component for react-native (Select2 for react-native).
Screenshots
Installation
1$ npm install react-native-multiple-select --save
or use yarn
1$ yarn add react-native-multiple-select
Usage
Note: Ensure to add and configure react-native-vector-icons to your project before using this package.
The snippet below shows how the component can be used
1// import component 2import MultiSelect from 'react-native-multiple-select'; 3 4const items = [{ 5 id: '92iijs7yta', 6 name: 'Ondo', 7}, { 8 id: 'a0s0a8ssbsd', 9 name: 'C2G', 10}, { 11 id: '16hbajsabsd', 12 name: 'Calabar', 13}, { 14 id: 'nahs75a5sg', 15 name: 'Fourth Item', 16}, { 17 id: '667atsas', 18 name: 'Fifth Item', 19}]; 20 21let selectedItem = selectedItems => { 22 // do something with selectedItems 23 console.log(selectedItems); 24}; 25 26<MultiSelect 27 items={items} 28 uniqueKey="id" 29 selectedItemsChange={selectedItem} 30 selectedItems={[]} 31 selectText="Pick Items" 32 searchInputPlaceholderText="Search Items..." 33 altFontFamily="ProximaNova-Light" 34 tagRemoveIconColor="#CCC" 35 tagBorderColor="#CCC" 36 tagTextColor="#CCC" 37 selectedItemTextColor="#CCC" 38 selectedItemIconColor="#CCC" 39 itemTextColor="#000" 40 searchInputStyle={{ color: '#CCC' }} 41 submitButtonColor="#CCC" 42 submitButtonText="Submit" 43/> 44
The component takes 3 compulsory props - items, uniqueKey and selectedItemsChange. Other props are optional. The table below explains more.
Props
| Prop | Required | Purpose |
|---|---|---|
| items | Yes | List of items to display in the multi-select component. JavaScript Array of objects. Each object must contain a name and unique identifier (Check sample above) |
| uniqueKey | Yes | Unique identifier that is part of each item's properties. Used internally as means of identifying each item (Check sample below) |
| selectedItemsChange | Yes | JavaScript function passed in as an argument. The function is to be defined with an argument (selectedItems). The function is called whenever items are added or removed in the component. (Check sample above) |
| selectedItems | No | List of selected items. JavaScript Array of objects that is part of the items (check above), that cna be instantiated with the component |
| selectText | No | Text displayed in main component |
| searchInputPlaceholderText | No | Placeholder text displayed in multi-select filter input |
| fontFamily | No | Custom font family to be used in component (affects all text except searchInputPlaceholderText described above) |
| altFontFamily | No | Font family for searchInputPlaceholderText |
| tagRemoveIconColor | No | Color to be used for the remove icon in selected items list |
| tagBorderColor | No | Border color for each selected item |
| tagTextColor | No | Text color for selected items list |
| selectedItemFontFamily | No | Font family for each selected item in multi-select drop-down |
| selectedItemTextColor | No | Text color for each selected item in multi-select drop-down |
| selectedItemIconColor | No | Color for selected check icon for each selected item in multi-select drop-down |
| itemFontFamily | No | Font family for each non-selected item in multi-select drop-down |
| itemTextColor | No | Text color for each non-selected item in multi-select drop-down |
| searchInputStyle | No | Style object for multi-select input element |
| submitButtonColor | No | Background color for submit button |
| submitButtonText | No | Text displayed on submit button |
Removing all selected items
To use, add ref to MultiSelect component in parent component, then call method against reference. i.e.
1<MultiSelect 2 ref={c => this._multiSelect = c} 3 ... 4/> 5 6clearSelectedCategories = () => { 7 this._multiSelect.removeAllItems(); 8}; 9
Contributing
Contributions are welcome and will be fully credited.
Contributions are accepted via Pull Requests on Github.
Pull Requests
-
Document any change in behaviour - Make sure the
README.mdand any other relevant documentation are kept up-to-date. -
Consider our release cycle - We try to follow SemVer v2.0.0. Randomly breaking public APIs is not an option.
-
Create feature branches - Don't ask us to pull from your master branch.
-
One pull request per feature - If you want to do more than one thing, send multiple pull requests.
-
Send coherent history - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please squash them before submitting.
Issues
Check issues for current issues.
Author
License
The MIT License (MIT). Please see LICENSE for more information.
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
Found 0/30 approved changesets -- score normalized to 0
Reason
no SAST tool detected
Details
- Warn: no pull requests merged into dev branch
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
61 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
- Warn: Project is vulnerable to: GHSA-qrmc-fj45-qfc2
- Warn: Project is vulnerable to: GHSA-q42p-pg8m-cqh6
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-2pr6-76vf-7546
- Warn: Project is vulnerable to: GHSA-8j8c-7jfh-h6hx
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-282f-qqgm-c34q
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-4xc9-xhrj-v574
- Warn: Project is vulnerable to: GHSA-x5rq-j2xg-h7qm
- Warn: Project is vulnerable to: GHSA-jf85-cpcp-j695
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-xf5p-87ch-gxw2
- Warn: Project is vulnerable to: GHSA-5v2h-r2cx-5xgj
- Warn: Project is vulnerable to: GHSA-rrrm-qjm4-v8hf
- Warn: Project is vulnerable to: GHSA-f9cm-qmx5-m98h
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
- Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-662x-fhqg-9p8v
- Warn: Project is vulnerable to: GHSA-394c-5j6w-4xmx
- Warn: Project is vulnerable to: GHSA-78cj-fxph-m83p
- Warn: Project is vulnerable to: GHSA-fhg7-m89q-25r3
- Warn: Project is vulnerable to: GHSA-cf4h-3jhx-xvhq
- Warn: Project is vulnerable to: GHSA-5v72-xg48-5rpm
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
Score
1.7
/10
Last Scanned on 2025-01-27
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More