update docs

Author: eskimoblood

side/src/App.css

@@ -1,32 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

side/src/App.js

@@ -12,10 +12,13 @@ import ScaleScale from './examples/Scale_Scale'
 import PointerCustom from './examples/Pointer_custom'
 import ScaleCustom from './examples/Scale_custom'
 import ScaleStyled from './examples/Scale_styled'
+import ScaleStyled2 from './examples/Scale_styled_2'
 import ArcPointerStyled from './examples/Arc_Pointer_styled'
+import Filter from './filter'
 
 export default () => (
     <div>
+        <Filter />
         <H1>React Knob</H1>
         <H2>
             <span>Base Components</span>
@@ -52,14 +55,8 @@ export default () => (
             <span>Custom Elements</span>
         </H2>
         <Description>
-            The <pre>Knob</pre> component and the <pre>Pointer</pre> and{' '}
-            <pre>Scale</pre> components can also render custom components. All
-            direct children of the <pre>Knob</pre> get the following props
-            passed: <pre>percentage</pre> <pre>size</pre>, <pre>value</pre>,
-            <pre>angleOffset</pre>,<pre>angleRange</pre>,{' '}
-            <pre>radius: size / 2</pre>,<pre>center: size / 2</pre>,{' '}
-            <pre>steps</pre>. The children of <pre>Pointer</pre> get{' '}
-            <pre>width</pre>, <pre>height</pre>, <pre>percentage</pre> passed.
+            The <pre>Pointer</pre> and <pre>Scale</pre> components can also
+            render custom components.
         </Description>
         <Grid>
             <PointerCustom />
@@ -68,10 +65,17 @@ export default () => (
         <H2>
             <span>Styles</span>
         </H2>
-        <Description />
+        <Description>
+            The components and the knob itself can be styled by addingthe{' '}
+            <pre>className</pre> prop. The <pre>Scale</pre> can have an
+            additional <pre>activeClassname</pre> prop to style the active tick
+            differently. As all components are SVG you can also use filters in
+            your styles.
+        </Description>
         <Grid>
             <ArcPointerStyled />
             <ScaleStyled />
+            <ScaleStyled2 />
         </Grid>
     </div>
 )

side/src/examples/Arc.js

@@ -10,6 +10,7 @@ const example = `
   angleRange={280}
   min={0}
   max={100}
+  onChange={value => console.log(value)}
 >
   <Arc 
     arcWidth={5}

side/src/examples/Arc_Pointer.js

@@ -10,6 +10,7 @@ const example = `
   angleRange={280}
   min={0}
   max={100}
+  onChange={value => console.log(value)}
 >
   <Arc 
     arcWidth={5}

side/src/examples/Arc_Pointer_Value.js

@@ -10,6 +10,7 @@ const example = `
   angleRange={280}
   min={0}
   max={100}
+  onChange={value => console.log(value)}
 >
   <Arc 
     arcWidth={5}

side/src/examples/Arc_Pointer_styled.js

@@ -1,6 +1,5 @@
 import React from 'react'
 import Example from '../Example'
-import colors from '../colors'
 import { Arc, Pointer } from 'rc-knob'
 
 const example = `
@@ -10,6 +9,8 @@ const example = `
   angleRange={280}
   min={0}
   max={100}
+  className="styledKnob"
+  onChange={value => console.log(value)}
 >
   <Arc 
     arcWidth={1.5}

side/src/examples/Pointer.js

@@ -10,6 +10,7 @@ const example = `
   angleRange={280}
   min={0}
   max={100}
+  onChange={value => console.log(value)}
 >
   <Pointer 
     width={3} 

side/src/examples/Pointer_custom.js

@@ -5,13 +5,17 @@ import { Pointer, Arc } from 'rc-knob'
 
 const example = `
 const CustomPointer = ({ width, percentage }) => (
-    <react r={width} fill={\`hsb(\${360 * percentage}, 50%, 50%)\`} />
+    <rect 
+      r={width}
+      fill={\`hsb(\${360 * percentage}, 50%, 50%)\`} 
+    />
 <Knob 
   size={100}  
   angleOffset={220} 
   angleRange={280}
   min={0}
   max={100}
+  onChange={value => console.log(value)}
 >
   <Pointer 
     width={3} 

side/src/examples/Scale.js

@@ -11,6 +11,7 @@ const example = `
   steps={10}
   min={0}
   max={100}
+  onChange={value => console.log(value)}
 >
   <Scale 
     tickWidth={2} 

side/src/examples/Scale_Pointer.js

@@ -11,6 +11,7 @@ const example = `
   steps={10}
   min={0}
   max={100}
+  onChange={value => console.log(value)}
 >
   <Scale 
     tickWidth={2}