Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/wrathchaos/react-native-bouncy-checkbox-group
Fully customizable bouncy checkbox group for React Native
https://github.com/wrathchaos/react-native-bouncy-checkbox-group
apple checkbox checkbox-group development ios javascript mobile mobile-app mobile-application-development programming react react-native react-native-checkbox react-native-checkbox-group reactjs typescript
Last synced: 3 months ago
JSON representation
Fully customizable bouncy checkbox group for React Native
- Host: GitHub
- URL: https://github.com/wrathchaos/react-native-bouncy-checkbox-group
- Owner: WrathChaos
- License: mit
- Created: 2021-10-08T14:42:38.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-19T14:03:42.000Z (9 months ago)
- Last Synced: 2024-05-01T14:29:02.627Z (9 months ago)
- Topics: apple, checkbox, checkbox-group, development, ios, javascript, mobile, mobile-app, mobile-application-development, programming, react, react-native, react-native-checkbox, react-native-checkbox-group, reactjs, typescript
- Language: TypeScript
- Homepage: https://freakycoder.com/
- Size: 4.64 MB
- Stars: 22
- Watchers: 3
- Forks: 10
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/WrathChaos/react-native-bouncy-checkbox-group)
[](https://github.com/WrathChaos/react-native-bouncy-checkbox-group)
[](https://www.npmjs.com/package/react-native-bouncy-checkbox-group)
[](https://www.npmjs.com/package/react-native-bouncy-checkbox-group)
[](https://opensource.org/licenses/MIT)
[](https://github.com/prettier/prettier)
# Installation
Add the dependency:
```bash
npm i react-native-bouncy-checkbox-group
```
## Peer Dependencies
IMPORTANT! You need install them
```js
"react-native-bouncy-checkbox": ">= 4.0.0"
```
# Usage
## Import
```jsx
import BouncyCheckboxGroup, {
CheckboxButton,
} from "react-native-bouncy-checkbox-group";
```
## Fundamental Usage
```jsx
{
console.log("SelectedItem: ", JSON.stringify(selectedItem));
}}
/>
```
## Vertical Usage
```jsx
{
console.log("SelectedItem: ", JSON.stringify(selectedItem));
}}
/>
```
## Data Format
You MUST follow this data format as `CheckboxButton`
```json
[
{
id: 0,
},
{
id: 1,
},
{
id: 2,
},
{
id: 3,
},
];
```
## 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 | ICheckboxButton[] | undefined | set the checkboxes as a data |
| onChange | function | undefined | set your own logic when the group of checkbox is selected |
| checkboxProps | IBouncyCheckboxProps | undefined | default props for all checkboxes |
| initial | number | undefined | default selected item (id of selection object) |
## Customization (Optionals)
## [React Native Bouncy Checkbox Customizations](https://github.com/WrathChaos/react-native-bouncy-checkbox#configuration---props)
You can use all of the customiztion options from the rn bouncy checkbox. You NEED to add the styling and props into the `data`. Therefore, you can customize each of the checkboxes easily.
## Advanced Usage Example JSON Data
```tsx
const staticData: CheckboxButton[] = [
{
id: 0,
fillColor: '#ff7473',
unFillColor: '#fbbfbb',
iconStyle: _iconStyle('#fbbfbb'),
iconImageStyle: styles.iconImageStyle,
},
{
id: 1,
fillColor: '#5567e9',
unFillColor: '#afb5f5',
iconStyle: _iconStyle('#afb5f5'),
iconImageStyle: styles.iconImageStyle,
},
{
id: 2,
fillColor: '#a98ae7',
unFillColor: '#cab6f4',
iconStyle: _iconStyle('#cab6f4'),
iconImageStyle: styles.iconImageStyle,
},
{
id: 3,
fillColor: '#fcb779',
unFillColor: '#ffd1a7',
iconStyle: _iconStyle('#ffd1a7'),
iconImageStyle: styles.iconImageStyle,
},
{
id: 4,
fillColor: '#2be055',
unFillColor: '#cbf2d5',
iconStyle: _iconStyle('#cbf2d5'),
iconImageStyle: styles.iconImageStyle,
},
];
```
```tsx
const verticalStaticData: CheckboxButton[] = [
{
id: 0,
text: 'Watermelon',
fillColor: '#ff7473',
unFillColor: '#fbbfbb',
iconStyle: _iconStyle('#fbbfbb'),
textStyle: styles.textStyle,
style: styles.verticalStyle,
iconImageStyle: styles.iconImageStyle,
},
{
id: 1,
text: 'Ultramarine Blue',
fillColor: '#5567e9',
unFillColor: '#afb5f5',
iconStyle: _iconStyle('#afb5f5'),
textStyle: styles.textStyle,
style: styles.verticalStyle,
iconImageStyle: styles.iconImageStyle,
},
{
id: 2,
text: 'Soft Purple',
fillColor: '#a98ae7',
unFillColor: '#cab6f4',
iconStyle: _iconStyle('#cab6f4'),
textStyle: styles.textStyle,
style: styles.verticalStyle,
iconImageStyle: styles.iconImageStyle,
},
{
id: 3,
text: 'Takao',
fillColor: '#fcb779',
unFillColor: '#ffd1a7',
iconStyle: _iconStyle('#ffd1a7'),
textStyle: styles.textStyle,
style: styles.verticalStyle,
iconImageStyle: styles.iconImageStyle,
},
{
id: 4,
text: 'Malachite',
fillColor: '#2be055',
unFillColor: '#cbf2d5',
iconStyle: _iconStyle('#cbf2d5'),
textStyle: styles.textStyle,
style: styles.verticalStyle,
iconImageStyle: styles.iconImageStyle,
},
];
```
```tsx
const _iconStyle = (borderColor: string) => ({
height: 50,
width: 50,
borderRadius: 25,
borderColor: borderColor,
});
```
## Future Plans
- [x] ~~LICENSE~~
- [ ] Write an article about the lib on Medium
## Author
FreakyCoder, [email protected]
## License
React Native Bouncy Checkbox Group is available under the MIT license. See the LICENSE file for more info.