prettified resizble example

makivlach · Apr 4, 2018 · 208d549 · 208d549
1 parent 6ad973b
commit 208d549
Showing 1 changed file with 57 additions and 18 deletions.
diff --git a/examples/Resizable.js b/examples/Resizable.js
@@ -1,11 +1,11 @@
-import React, { Component } from 'react'
-import Slider from '../src/slider'
+import React, {Component} from 'react';
+import Slider from '../src/slider';
 
 export default class Resizable extends Component {
   state = {
     display: true,
-    width: 600
-  }
+    width: 600,
+  };
   render() {
     const settings = {
       dots: true,
@@ -17,21 +17,60 @@ export default class Resizable extends Component {
     return (
       <div>
         <h2> Resizable Collapsible </h2>
-        <button className='button' onClick={() => this.setState({
-          width: this.state.width + 100 })}> increase </button>
-        <button className='button' onClick={() => this.setState({
-          width: this.state.width - 100 })}> decrease </button>
-        <button className='button' onClick={() => this.setState({
-          display: !this.state.display })}> toggle </button>
-        <div style={{ width: this.state.width+'px',
-          display: (this.state.display ? 'block' : 'none')}}>
+        <button
+          className="button"
+          onClick={() =>
+            this.setState({
+              width: this.state.width + 100,
+            })
+          }>
+          {' '}
+          increase{' '}
+        </button>
+        <button
+          className="button"
+          onClick={() =>
+            this.setState({
+              width: this.state.width - 100,
+            })
+          }>
+          {' '}
+          decrease{' '}
+        </button>
+        <button
+          className="button"
+          onClick={() =>
+            this.setState({
+              display: !this.state.display,
+            })
+          }>
+          {' '}
+          toggle{' '}
+        </button>
+        <div
+          style={{
+            width: this.state.width + 'px',
+            display: this.state.display ? 'block' : 'none',
+          }}>
           <Slider {...settings}>
-            <div><h3>1</h3></div>
-            <div><h3>2</h3></div>
-            <div><h3>3</h3></div>
-            <div><h3>4</h3></div>
-            <div><h3>5</h3></div>
-            <div><h3>6</h3></div>
+            <div>
+              <h3>1</h3>
+            </div>
+            <div>
+              <h3>2</h3>
+            </div>
+            <div>
+              <h3>3</h3>
+            </div>
+            <div>
+              <h3>4</h3>
+            </div>
+            <div>
+              <h3>5</h3>
+            </div>
+            <div>
+              <h3>6</h3>
+            </div>
           </Slider>
         </div>
       </div>