File tree Expand file tree Collapse file tree 1 file changed +31
-5
lines changed Expand file tree Collapse file tree 1 file changed +31
-5
lines changed Original file line number Diff line number Diff line change @@ -12,24 +12,50 @@ npm install --save react-toggle-switch
12
12
## Usage
13
13
14
14
``` javascript
15
- import React from ' react' ;
15
+ import React , { Component } from ' react' ;
16
16
import {render } from ' react-dom' ;
17
17
import Switch from ' react-toggle-switch'
18
18
19
- export default class MyComponent extends React .Component {
19
+ class MyComponent extends Component {
20
+
21
+ constructor (props ) {
22
+ super (props);
23
+ this .state = {
24
+ switched: false
25
+ };
26
+ }
27
+
28
+ toggleSwitch = () => {
29
+ this .setState (prevState => {
30
+ return {
31
+ switched: ! prevState .switched
32
+ };
33
+ });
34
+ };
35
+
20
36
render () {
21
37
return (
22
38
< div>
23
- < Switch onClick= {() => this .setState ({prop: ! this .state .prop })}/ >
24
- < Switch onClick= {this .toggle }>
39
+ {/* Basic Switch */ }
40
+ < Switch onClick= {this .toggleSwitch }/ >
41
+
42
+ {/* With children */ }
43
+ < Switch onClick= {this .toggleSwitch }>
25
44
< i class = " some-icon" / >
26
45
< / Switch>
46
+
47
+ {/* Disabled */ }
27
48
< Switch enabled= {false }/ >
49
+
50
+ {/* Custom classnames */ }
28
51
< Switch className= ' other-class' / >
29
52
< / div>
30
53
);
31
54
}
55
+
32
56
}
57
+
58
+ export default MyComponent ;
33
59
```
34
60
35
61
### Props
@@ -44,4 +70,4 @@ clicking on it. Default is `false`.
44
70
45
71
``` css
46
72
@import " node_modules/react-toggle-switch/dist/css/switch.min.css"
47
- ```
73
+ ```
You can’t perform that action at this time.
0 commit comments