diff --git a/demo/src/App.js b/demo/src/App.js
index f48bfa8..2a53d3b 100644
--- a/demo/src/App.js
+++ b/demo/src/App.js
@@ -1,8 +1,39 @@
 import React, { Component } from 'react'
 import PullRefresh from 'react-pullrefresh'
+import styled from 'styled-components'
 
 const sleep = msec => new Promise(resolve => setTimeout(resolve, msec))
 
+const Comp = styled.div`
+  width: 100%;
+  background-color: gray;
+  overflow: hidden;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`
+
+const render = (props, state, children) => {
+  const { max, y, willRefresh, refreshed, refreshing } = state
+  const p = Math.atan(y / max)
+  return [
+    <Comp
+      key='pull'
+      style={{
+        backgroundColor: refreshing ? 'blue' : refreshed ? 'green' : 'gray',
+        height: Math.max(p * max, 0)
+      }}
+    >
+      { refreshing && 'refreshing :' }
+      { refreshed && 'refreshed :' }
+      { willRefresh && 'willRefresh :' }
+      { parseInt(y, 10) }
+    </Comp>,
+    children
+  ]
+}
+
 class App extends Component {
   constructor(props) {
     super(props)
@@ -26,6 +57,7 @@ class App extends Component {
   render() {
     return (
       <PullRefresh
+        render={render}
         color='#787878'
         bgColor='#fff'
         max={100}
diff --git a/src/component/index.js b/src/component/index.js
index 183d63a..aa16e54 100644
--- a/src/component/index.js
+++ b/src/component/index.js
@@ -44,9 +44,9 @@ const DashedCircle = styled.circle`
 `
 
 export default (props, state, children) => {
-  const { yMax, y, refreshing, refreshed } = state
-  const p = Math.atan(y / props.max)
-  const pMax = Math.atan(yMax / props.max)
+  const { max, yRefreshing, y, refreshing, refreshed } = state
+  const p = Math.atan(y / max)
+  const pMax = Math.atan(yRefreshing / max)
   const r = Math.PI * 10 * 2
   const Svg = refreshing ? RotatingSvg : 'svg'
   const Circle = refreshing ? DashedCircle : 'circle'
@@ -54,14 +54,14 @@ export default (props, state, children) => {
     <Component
       key='pull'
       style={{
-        top: Math.max(refreshed ? Math.atan(1) : p, 0) * props.max - 10,
+        top: Math.max(refreshed ? Math.atan(1) : p, 0) * max - 10,
         transform: `translate(-50%, -100%) scale(${refreshed ? p : 1},${refreshed ? p : 1})`,
         backgroundColor: props.bgColor
       }}
     >
       <Svg
         style={{
-          transform:`rotate(${yMax}deg)`
+          transform:`rotate(${yRefreshing}deg)`
         }}
         width={40}
         height={40}
diff --git a/src/component/test.js b/src/component/test.js
deleted file mode 100644
index b3d56e3..0000000
--- a/src/component/test.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from 'react'
-import { StyleSheet, css } from 'aphrodite'
-
-const styles = StyleSheet.create({
-  comp: {
-    width: '100%',
-    backgroundColor: 'gray',
-    overflow: 'hidden',
-    color: 'white',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  refreshing: {
-    backgroundColor: 'blue'
-  },
-  refreshed: {
-    backgroundColor: 'green'
-  },
-  willRefresh: {
-    backgroundColor: 'red'
-  }
-})
-
-export default (props, state, children) => {
-  const p = Math.atan(state.y / props.max)
-  return [
-    <div
-      key='pull'
-      className={css(
-        styles.comp,
-        state.refreshing && styles.refreshing,
-        state.refreshed && styles.refreshed,
-        state.willRefresh && styles.willRefresh
-      )}
-      style={{
-        height: Math.max(p * props.max, 0)
-      }}
-    >
-      { state.refreshing && 'refreshing :' }
-      { state.refreshed && 'refreshed :' }
-      { state.willRefresh && 'willRefresh :' }
-      { parseInt(state.y, 10) }
-    </div>,
-    children
-  ]
-}
-
-
diff --git a/src/index.js b/src/index.js
index 8c50908..318f061 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Spring from './spring'
 import scrollTop from './scrollTop'
-import defaultRender from './component'
+import renderDefault from './component'
 
 const MAX = 100
 
@@ -11,7 +11,8 @@ export default class PullRefresh extends Component {
     super(props)
     this.state = {
       y: 0,
-      yMax: 0,
+      yRefreshing: 0,
+      max: MAX,
       refreshing: false,
       refreshed: false
     }
@@ -24,21 +25,22 @@ export default class PullRefresh extends Component {
     this._py = ey
   }
   async onUp(evt) {
-    const { y, refreshed, refreshing } = this.state
+    const { max, willRefresh, refreshed, refreshing } = this.state
     const { onRefresh } = this.props
     if(refreshed || refreshing) return
     this._down = false
-    if(y >= MAX) {
+    if(willRefresh) {
       this._willRefresh = true
-      await this._spring.to(MAX)
+      await this._spring.to(max)
       this._spring.pause()
       this._willRefresh = false
       this.setState({
+        willRefresh: false,
         refreshing: true
       })
       await onRefresh()
       this.setState({
-        yMax: 0,
+        yRefreshing: 0,
         refreshed: true,
         refreshing: false
       })
@@ -60,11 +62,12 @@ export default class PullRefresh extends Component {
     this._py = ey
   }
   onSpringUpdate(spring) {
-    const { yMax, refreshed } = this.state
+    const { max, yRefreshing, refreshed } = this.state
     const y = spring.currentValue
     this.setState({
       y,
-      yMax: this._willRefresh ? Math.max(y, yMax) : y
+      willRefresh: y >= max,
+      yRefreshing: this._willRefresh ? Math.max(y, yRefreshing) : y
     })
     if(refreshed && y === 0) this.setState({ refreshed: false })
   }
@@ -74,7 +77,7 @@ export default class PullRefresh extends Component {
     this._spring.onUpdate = ::this.onSpringUpdate
   }
   render() {
-    const { bgColor, color, onRefresh, disabled, as, children, ...props } = this.props
+    const { render, bgColor, color, onRefresh, disabled, as, children, ...props } = this.props
     const Container = as
     return (
       <Container
@@ -86,7 +89,7 @@ export default class PullRefresh extends Component {
         onTouchEnd  ={!disabled && ::this.onUp}
         onTouchMove ={!disabled && ::this.onMove}
       >
-        { defaultRender(this.props, this.state, children) }
+        { render(this.props, this.state, children) }
       </Container>
     )
   }
@@ -99,6 +102,7 @@ PullRefresh.propTypes = {
   disabled: PropTypes.bool,
   color: PropTypes.string,
   bgColor: PropTypes.string,
+  render: PropTypes.func,
   // max: PropTypes.number,
   // offset: PropTypes.number,
   // size: PropTypes.number,
@@ -114,6 +118,7 @@ PullRefresh.defaultProps = {
   disabled: false,
   color: '#787878',
   bgColor: '#fff',
+  render: renderDefault,
   // max: 100,
   // offset: 0,
   // size: 40,