|
12 | 12 |
|
13 | 13 |
|
14 | 14 |
|
| 15 | + |
| 16 | +<h4>Customizable and <b>Easy</b> to use toggle switch.</h4> |
| 17 | + |
| 18 | +- Use the color of your choice |
| 19 | +- Use bordered or filled toggle switch upon your choice |
| 20 | +- Works on all the platforms Android, Ios and Web in the same way |
| 21 | +- Zero dependencies |
| 22 | + |
| 23 | + |
| 24 | + |
| 25 | +# Compatibility |
| 26 | + |
| 27 | + |
| 28 | +| iOS | Android | Web | Expo | |
| 29 | +--------|---------|-----|------| |
| 30 | +| ✅ | ✅ | ✅ | ✅ | |
| 31 | + |
| 32 | + |
| 33 | + |
| 34 | + |
| 35 | +# 🔌 Installation |
| 36 | + |
| 37 | +```sh |
| 38 | +$ npm install react-native-toggle-input |
| 39 | + |
| 40 | +``` |
| 41 | + |
| 42 | +OR |
| 43 | + |
| 44 | +```sh |
| 45 | +$ yarn add react-native-toggle-input |
| 46 | +``` |
| 47 | + |
| 48 | + |
| 49 | +# 😎 Basic Usage |
| 50 | +```jsx |
| 51 | +import Toggle from 'react-native-toggle-input' |
| 52 | + |
| 53 | +const App = () => { |
| 54 | + |
| 55 | + const [toggle, setToggle] = React.useState(false); |
| 56 | + |
| 57 | + |
| 58 | + return( |
| 59 | + <Toggle toggle={toggle} setToggle={setToggle} /> |
| 60 | + ) |
| 61 | + |
| 62 | +}; |
| 63 | +``` |
| 64 | + |
| 65 | + |
| 66 | +For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-toggle-input) |
| 67 | + |
| 68 | +# ⭐ Props |
| 69 | +| Name | Type | Description | |
| 70 | +| ---- | ---- | ----------- | |
| 71 | +| color | String | Color of the toggle switch (Optional) |
| 72 | +| size | Number | Size of the toggle switch (Optional) |
| 73 | +| filled | boolean | If you want to use filled toggle switch set it to true (Optional) |
| 74 | +| circleColor | String | Use the color you want to give to the circle inside swith (Required for filled switch) |
| 75 | +| toggle | boolean | Default value of the toggle switch (Required) |
| 76 | +| setToggle | Function | Pass the function that will be used to set toggle status (Required) |
| 77 | + |
| 78 | + |
| 79 | +# 😎 Advanced Usage |
| 80 | +```jsx |
| 81 | +import Toggle from 'react-native-toggle-input' |
| 82 | + |
| 83 | +const App = () => { |
| 84 | + |
| 85 | + const [toggle, setToggle] = React.useState(false); |
| 86 | + |
| 87 | + |
| 88 | + return( |
| 89 | + <Toggle |
| 90 | + color={"#4C956C"} |
| 91 | + size={30} |
| 92 | + filled={true} |
| 93 | + circleColor={"white"} |
| 94 | + toggle={toggle} |
| 95 | + setToggle={setToggle} |
| 96 | + /> |
| 97 | + ) |
| 98 | + |
| 99 | +}; |
| 100 | +``` |
| 101 | + |
| 102 | + |
| 103 | +For Live `Demo` [(Expo Snack)](https://snack.expo.dev/@mmusaib/react-native-toggle-input) |
| 104 | + |
| 105 | + |
| 106 | + |
0 commit comments