Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-multi-grid-selection
Fully customizable Multi Grid Card Selection component for React Native on both iOS and Android
https://github.com/wrathchaos/react-native-multi-grid-selection
android apple application component front-end google ios jsx mobile mobile-app programming react react-native reactjs
Last synced: 12 days ago
JSON representation
Fully customizable Multi Grid Card Selection component for React Native on both iOS and Android
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-multi-grid-selection
- Owner: WrathChaos
- Created: 2021-02-02T14:11:53.000Z (almost 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-11T10:16:23.000Z (over 3 years ago)
- Last Synced: 2024-09-16T03:51:51.317Z (about 2 months ago)
- Topics: android, apple, application, component, front-end, google, ios, jsx, mobile, mobile-app, programming, react, react-native, reactjs
- Language: TypeScript
- Homepage: https://freakycoder.com
- Size: 40 MB
- Stars: 5
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-multi-grid-selection)
[](https://www.npmjs.com/package/react-native-multi-grid-selection)
[](https://www.npmjs.com/package/react-native-multi-grid-selection)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```bash
npm i react-native-multi-grid-selection
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"@freakycoder/react-native-bounceable": ">= 0.2.4"
```
# Usage
## Import
```jsx
import MultiGridSingleSelect from "react-native-multi-grid-selection";
```
## Fundamental Usage
```jsx
console.log("Selected Data: ", selectedData)}
/>
```
## Data Structure
You **MUST** follow this data structure to use the `react-native-multi-grid-selection`
```js
const testData: Array = [
{
cardId: 0,
title: "What is your favorite NBA Team?",
data: [
{ id: 0, name: "Los Angeles Lakers" },
{ id: 1, name: "Golden State Warriors" },
{ id: 2, name: "Chicago Bulls" },
{ id: 3, name: "Boston Celtics" },
{ id: 4, name: "Cleveland" },
{ id: 5, name: "Miami Heat" },
],
},
{
cardId: 1,
title: "Who is the GOAT?",
data: [
{ id: 0, name: "Micheal Jordan" },
{ id: 1, name: "Wilt Chamberlain" },
{ id: 2, name: "Lebron James" },
{ id: 3, name: "Magic Johnson" },
{ id: 4, name: "Shaquille O'Neal" },
{ id: 5, name: "Kobe Bryant" },
],
},
{
cardId: 2,
title: "Which team will win NBA in 2021?",
data: [
{ id: 0, name: "Grizzlies" },
{ id: 1, name: "Wizards" },
{ id: 2, name: "Mavericks" },
{ id: 3, name: "Spurs" },
{ id: 4, name: "Hornets" },
{ id: 5, name: "Pistons" },
],
},
];
```
## Interfaces
### IMultiSelectionDataType
```jsx
interface IMultiSelectionDataType {
cardId: number;
title: string;
data: Array;
}
```
### ICardSelectionDataType
```jsx
export interface ICardSelectionDataType {
cardId: number;
title: string;
selectedData: ISelectionDataType;
}
```
### ISelectionDataType
```jsx
export interface ISelectionDataType {
id: number;
name: string;
data?: any;
}
```
## Example Project 😍
You can checkout the example project 🥰
Simply run
- `npm i`
- `react-native run-ios/android`
should work of the example project.
# Configuration - Props
## Fundamentals
| Property | Type | Default | Description |
| -------- | :------: | :-------: | ---------------------------------------------------------------------- |
| data | string | undefined | set the data for creating multi grid card system |
| onSelect | function | undefined | set your own logic for the selection functionality when it is selected |
## Customization (Optionals)
| Property | Type | Default | Description |
| -------------------- | :-------: | :-------: | ----------------------------------------------------------------------- |
| listStyle | ViewStyle | default | set or override the style object for the list style |
| cardStyle | ViewStyle | default | set or override the style object for the card style |
| headerStyle | ViewStyle | default | set or override the style object for the card header style |
| headerTextStyle | TextStyle | default | set or override the style object for the card header's text title style |
| buttonStyle | ViewStyle | default | set or override the style object for each button style |
| buttonContainerStyle | ViewStyle | default | set or override the style object for each button style |
| buttonTextStyle | TextStyle | default | set or override the style object for the card button text title style |
| activeColor | color | "#307ff2" | change the active color of the buttons |
## Future Plans
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
## Author
FreakyCoder, [email protected]
## License
React Native Multi Grid Selection is available under the MIT license. See the LICENSE file for more info.