Skip to content

Commit 49db757

Browse files
committed
Documentation is completed
1 parent 5c5bfca commit 49db757

File tree

4 files changed

+59
-51
lines changed

4 files changed

+59
-51
lines changed

README.md

Lines changed: 59 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,88 @@
1-
<img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/>
1+
<img alt="React Native Bouncy Checkbox Group" src="assets/logo.png" width="1050"/>
22

3-
[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-library-starter)
3+
[![Battle Tested ✅](https://img.shields.io/badge/-Battle--Tested%20%E2%9C%85-03666e?style=for-the-badge)](https://github.com/WrathChaos/react-native-bouncy-checkbox-group)
44

5-
[![React Native Typescript Library Starter](https://img.shields.io/badge/-Extremely%20easy%20to%20create%20a%20React%20Native%20Component%20Library%20with%20both%20Stateful%20and%20Functional%20Component%20Examples-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-typescript-library-starter)
5+
[![React Native Bouncy Checkbox Group](https://img.shields.io/badge/-Extremely%20easy%20to%20create%20a%20React%20Native%20Component%20Library%20with%20both%20Stateful%20and%20Functional%20Component%20Examples-orange?style=for-the-badge)](https://github.com/WrathChaos/react-native-bouncy-checkbox-group)
66

7-
[![npm version](https://img.shields.io/npm/v/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter)
8-
[![npm](https://img.shields.io/npm/dt/react-native-typescript-library-starter.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-typescript-library-starter)
7+
[![npm version](https://img.shields.io/npm/v/react-native-bouncy-checkbox-group.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bouncy-checkbox-group)
8+
[![npm](https://img.shields.io/npm/dt/react-native-bouncy-checkbox-group.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-bouncy-checkbox-group)
99
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
1010
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
1111
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
1212

1313
<p align="center">
14-
<img alt="React Native Typescript Library Starter"
15-
src="assets/Screenshots/typescript.jpg" />
14+
<img alt="React Native Bouncy Checkbox Group"
15+
src="assets/Screenshots/react-native-bouncy-checkbox-group.png.gif" />
1616
</p>
1717

18-
## Library Usage
19-
20-
- `npm i`
21-
- Delete example folder
22-
- Delete build folder
23-
- Make your own library into the `lib` folder
24-
- Change package.json
25-
- Change README for your own documentation
26-
- `npm run build`
27-
28-
```
29-
> react-native-typescript-library-starter@0.1.0 build /Users/kuray/Coursion/MyLibraries/ReactNative/react-native-typescript-library-starter
30-
> cd lib && tsc && cp ../package.json ../build/dist/ && Echo Build completed!
31-
32-
Build completed!
33-
```
34-
35-
- Test your build/dist into the new project
36-
- Finally, time to npm publish :)
37-
38-
### Below part is for Documentation ! Remove above Library Usage
39-
4018
# Installation
4119

4220
Add the dependency:
4321

4422
```bash
45-
npm i react-native-typescript-library-starter
23+
npm i react-native-bouncy-checkbox-group
4624
```
4725

4826
## Peer Dependencies
4927

5028
<h5><i>IMPORTANT! You need install them</i></h5>
5129

5230
```js
53-
"react": ">= 16.x.x",
54-
"react-native": ">= 0.55.x",
31+
"react-native-bouncy-checkbox": ">= 2.1.5"
5532
```
5633

5734
# Usage
5835

5936
## Import
6037

6138
```jsx
62-
import MyComponent from "react-native-typescript-library-starter";
39+
import BouncyCheckboxGroup, {
40+
ICheckboxButton,
41+
} from "react-native-bouncy-checkbox-group";
6342
```
6443

6544
## Fundamental Usage
6645

6746
```jsx
68-
<MyComponent />
47+
<BouncyCheckboxGroup
48+
data={staticData}
49+
onChange={(selectedItem: ICheckboxButton) => {
50+
console.log("SelectedItem: ", JSON.stringify(selectedItem));
51+
}}
52+
/>
53+
```
54+
55+
## Vertical Usage
56+
57+
```jsx
58+
<BouncyCheckboxGroup
59+
data={verticalStaticData}
60+
style={{ flexDirection: "column" }}
61+
onChange={(selectedItem: ICheckboxButton) => {
62+
console.log("SelectedItem: ", JSON.stringify(selectedItem));
63+
}}
64+
/>
65+
```
66+
67+
## Data Format
68+
69+
You MUST follow this data format as `ICheckboxButton`
70+
71+
```json
72+
[
73+
{
74+
id: 0,
75+
},
76+
{
77+
id: 1,
78+
},
79+
{
80+
id: 2,
81+
},
82+
{
83+
id: 3,
84+
},
85+
];
6986
```
7087

7188
## Example Project 😍
@@ -83,35 +100,26 @@ should work of the example project.
83100

84101
## Fundamentals
85102

86-
| Property | Type | Default | Description |
87-
| ----------- | :----: | :-------: | --------------------- |
88-
| title | string | undefined | change the title |
89-
| description | string | undefined | change the descrition |
103+
| Property | Type | Default | Description |
104+
| -------- | :---------------: | :-------: | --------------------------------------------------------- |
105+
| data | ICheckboxButton[] | undefined | set the checkboxes as a data |
106+
| onChange | function | undefined | set your own logic when the group of checkbox is selected |
90107

91108
## Customization (Optionals)
92109

93-
| Property | Type | Default | Description |
94-
| -------------- | :-------: | :-------: | ---------------------------------------------------------------------- |
95-
| enableButton | boolean | false | let you enable the button (must use it for button) |
96-
| onPress | function | undefined | set your own logic for the button functionality when it is pressed |
97-
| buttonText | string | undefined | change the button's text |
98-
| style | ViewStyle | default | set or override the style object for the main container |
99-
| buttonStyle | ViewStyle | default | set or override the style object for the button style |
100-
| ImageComponent | Image | default | set your own component instead of default react-native Image component |
110+
#### [React Native Bouncy Checkbox Customizations](https://github.com/WrathChaos/react-native-bouncy-checkbox#configuration---props)
111+
112+
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 easly.
101113

102114
## Future Plans
103115

104116
- [x] ~~LICENSE~~
105117
- [ ] Write an article about the lib on Medium
106118

107-
# Change Log
108-
109-
Change log will be here !
110-
111119
## Author
112120

113121
FreakyCoder, kurayogun@gmail.com
114122

115123
## License
116124

117-
React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.
125+
React Native Bouncy Checkbox Group is available under the MIT license. See the LICENSE file for more info.
4.02 MB
Loading

assets/Screenshots/typescript.jpg

-28.5 KB
Binary file not shown.

assets/logo.png

10.2 KB
Loading

0 commit comments

Comments
 (0)