Skip to content

Commit de6f3e4

Browse files
kuraydevkuraydev
committed
chore: library and the documentation is ready
1 parent 78f2436 commit de6f3e4

4 files changed

Lines changed: 52 additions & 65 deletions

File tree

‎README.md‎

Lines changed: 30 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,71 +1,48 @@
1-
<img alt="React Native Typescript Library Starter" src="assets/logo.png" width="1050"/>
1+
<img alt="React Native Toggle Button" 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+
[![React Native Toggle Button](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-toggle-button)
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)
6-
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)
5+
[![npm version](https://img.shields.io/npm/v/react-native-toggle-button.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-toggle-button)
6+
[![npm](https://img.shields.io/npm/dt/react-native-toggle-button.svg?style=for-the-badge)](https://www.npmjs.com/package/react-native-toggle-button)
97
![Platform - Android and iOS](https://img.shields.io/badge/platform-Android%20%7C%20iOS-blue.svg?style=for-the-badge)
108
[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg?style=for-the-badge)](https://opensource.org/licenses/MIT)
119
[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg?style=for-the-badge)](https://github.com/prettier/prettier)
1210

1311
<p align="center">
14-
<img alt="React Native Typescript Library Starter"
12+
<img alt="React Native Toggle Button"
1513
src="assets/Screenshots/typescript.jpg" />
1614
</p>
1715

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-
4016
# Installation
4117

4218
Add the dependency:
4319

4420
```bash
45-
npm i react-native-typescript-library-starter
21+
npm i react-native-toggle-button
4622
```
4723

4824
## Peer Dependencies
4925

50-
<h5><i>IMPORTANT! You need install them</i></h5>
51-
52-
```js
53-
"react": ">= 16.x.x",
54-
"react-native": ">= 0.55.x",
55-
```
26+
Zero Dependency
5627

5728
# Usage
5829

5930
## Import
6031

6132
```jsx
62-
import MyComponent from "react-native-typescript-library-starter";
33+
import ToggleButton from "react-native-toggle-button";
6334
```
6435

6536
## Fundamental Usage
6637

6738
```jsx
68-
<MyComponent />
39+
<ToggleButton
40+
primaryText="On"
41+
secondaryText="Off"
42+
onPress={(isToggled: boolean) => {
43+
console.log(isToggled);
44+
}}
45+
/>
6946
```
7047

7148
## Example Project 😍
@@ -83,35 +60,33 @@ should work of the example project.
8360

8461
## Fundamentals
8562

86-
| Property | Type | Default | Description |
87-
| ----------- | :----: | :-------: | --------------------- |
88-
| title | string | undefined | change the title |
89-
| description | string | undefined | change the descrition |
63+
| Property | Type | Default | Description |
64+
| ------------- | :------: | :-------: | ------------------------------------------------------------------ |
65+
| primaryText | string | undefined | change the primaryText |
66+
| secondaryText | string | undefined | change the secondaryText |
67+
| onPress | function | undefined | set your own logic for the button functionality when it is pressed |
9068

9169
## Customization (Optionals)
9270

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 |
71+
| Property | Type | Default | Description |
72+
| ------------------- | :----------------------: | :-----: | ----------------------------------------------------------------------------------------- |
73+
| inial | boolean | true | let you change the initial toggled value |
74+
| style | ViewStyle | default | set or override the style object for the main container |
75+
| activeButtonStyle | ViewStyle | default | set or override the style object for the `active button` style |
76+
| inactiveButtonStyle | ViewStyle | default | set or override the style object for the `inactive button` style |
77+
| activeTextStyle | TextStyle | default | set or override the style object for the `active text` style |
78+
| inactiveTextStyle | TextStyle | default | set or override the style object for the `inactive text` style |
79+
| TouchableComponent | TouchableWithoutFeedback | default | set your own component instead of default react-native TouchableWithoutFeedback component |
10180

10281
## Future Plans
10382

10483
- [x] ~~LICENSE~~
10584
- [ ] Write an article about the lib on Medium
10685

107-
# Change Log
108-
109-
Change log will be here !
110-
11186
## Author
11287

11388
FreakyCoder, kurayogun@gmail.com
11489

11590
## License
11691

117-
React Native Typescript Library Starter is available under the MIT license. See the LICENSE file for more info.
92+
React Native Toggle Button is available under the MIT license. See the LICENSE file for more info.

‎example/App.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,10 @@ const App = () => {
1414
}}
1515
>
1616
<ToggleButton
17-
onPress={(value: boolean) => {
18-
console.log(value);
17+
primaryText="On"
18+
secondaryText="Off"
19+
onPress={(isToggled: boolean) => {
20+
console.log(isToggled);
1921
}}
2022
/>
2123
</SafeAreaView>

‎example/lib/ToggleButton.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@ interface IToggleButtonProps {
2222
activeTextStyle?: CustomTextStyleProp;
2323
inactiveButtonStyle?: CustomStyleProp;
2424
inactiveTextStyle?: CustomTextStyleProp;
25-
backgroundColor?: string;
2625
TouchableComponent?: any;
26+
primaryText: string;
27+
secondaryText: string;
28+
initial?: boolean;
2729
onPress: (isToggled: boolean) => void;
2830
}
2931

@@ -33,10 +35,13 @@ const ToggleButton: React.FC<IToggleButtonProps> = ({
3335
activeTextStyle,
3436
inactiveButtonStyle,
3537
inactiveTextStyle,
38+
primaryText,
39+
secondaryText,
40+
initial = true,
3641
TouchableComponent = TouchableWithoutFeedback,
3742
onPress,
3843
}) => {
39-
const [isToggled, setToggled] = useStateWithCallback<boolean>(false);
44+
const [isToggled, setToggled] = useStateWithCallback<boolean>(initial);
4045

4146
const handlePress = () => {
4247
setToggled(!isToggled, (newValue: boolean) => {
@@ -63,10 +68,10 @@ const ToggleButton: React.FC<IToggleButtonProps> = ({
6368
<TouchableComponent style={{}} onPress={handlePress}>
6469
<View style={styles.containerGlue}>
6570
<View style={onToggleButtonStyle}>
66-
<Text style={onToggleTextStyle}>On</Text>
71+
<Text style={onToggleTextStyle}>{primaryText}</Text>
6772
</View>
6873
<View style={offToggleButtonStyle}>
69-
<Text style={offToggleTextStyle}>Off</Text>
74+
<Text style={offToggleTextStyle}>{secondaryText}</Text>
7075
</View>
7176
</View>
7277
</TouchableComponent>

‎lib/ToggleButton.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,10 @@ interface IToggleButtonProps {
2222
activeTextStyle?: CustomTextStyleProp;
2323
inactiveButtonStyle?: CustomStyleProp;
2424
inactiveTextStyle?: CustomTextStyleProp;
25-
backgroundColor?: string;
2625
TouchableComponent?: any;
26+
primaryText: string;
27+
secondaryText: string;
28+
initial?: boolean;
2729
onPress: (isToggled: boolean) => void;
2830
}
2931

@@ -33,10 +35,13 @@ const ToggleButton: React.FC<IToggleButtonProps> = ({
3335
activeTextStyle,
3436
inactiveButtonStyle,
3537
inactiveTextStyle,
38+
primaryText,
39+
secondaryText,
40+
initial = true,
3641
TouchableComponent = TouchableWithoutFeedback,
3742
onPress,
3843
}) => {
39-
const [isToggled, setToggled] = useStateWithCallback<boolean>(false);
44+
const [isToggled, setToggled] = useStateWithCallback<boolean>(initial);
4045

4146
const handlePress = () => {
4247
setToggled(!isToggled, (newValue: boolean) => {
@@ -63,10 +68,10 @@ const ToggleButton: React.FC<IToggleButtonProps> = ({
6368
<TouchableComponent style={{}} onPress={handlePress}>
6469
<View style={styles.containerGlue}>
6570
<View style={onToggleButtonStyle}>
66-
<Text style={onToggleTextStyle}>On</Text>
71+
<Text style={onToggleTextStyle}>{primaryText}</Text>
6772
</View>
6873
<View style={offToggleButtonStyle}>
69-
<Text style={offToggleTextStyle}>Off</Text>
74+
<Text style={offToggleTextStyle}>{secondaryText}</Text>
7075
</View>
7176
</View>
7277
</TouchableComponent>

0 commit comments

Comments
 (0)