import React from 'react'
import { withUncontrolledProp } from '../'

export default withUncontrolledProp({
  prop: 'counter',
  defaultProp: 'defaultCounter',
  handlers: {
    onClick: ({ counter }) => () => (counter || 0) + 1,
  },
})(function StatelessCounter({ counter, onClick }) {
  return (
    <article>
      <h1>withUncontrolledProp</h1>
      <p>
        <button onClick={onClick}>Add one</button>
        Counter: {counter}
      </p>
    </article>
  )
})

@@ -342,16 +342,734 @@
 op%3C/h1%3E%0A
+      %3Ccode%3E%0A        %3Cpre%0A          style=%7B%7B%0A            color: 'lightgreen',%0A            backgroundColor: 'black',%0A            padding: 10,%0A            overflowX: 'scroll',%0A          %7D%7D%0A        %3E%7B%60import React from 'react'%0Aimport %7B withUncontrolledProp %7D from '@klarna/higher-order-components'%0A%0Aexport default withUncontrolledProp(%7B%0A  prop: 'counter',%0A  defaultProp: 'defaultCounter',%0A  handlers: %7B%0A    onClick: (%7B counter %7D) =%3E () =%3E (counter %7C%7C 0) + 1,%0A  %7D,%0A%7D)(function StatelessCounter(%7B counter, onClick %7D) %7B%0A  return (%0A    %3Carticle%3E%0A      %3Ch1%3EwithUncontrolledProp%3C/h1%3E%0A      %3Cp%3E%0A        %3Cbutton onClick=%7BonClick%7D%3EAdd one%3C/button%3E%0A        Counter: %7Bcounter%7D%0A      %3C/p%3E%0A    %3C/article%3E%0A  )%0A%7D)%60%7D%3C/pre%3E%0A      %3C/code%3E%0A
       %3Cp

Complete the withUncontrolledProp example