rcaferati / react-awesome-button

React button component. Awesome button is a 3D UI, progress, social and share enabled, animated at 60fps, light weight, performant, production ready react UI button component. 🖥️ 📱
https://awesome-button.caferati.me
MIT License
1.3k stars 133 forks source link

onPress not working #69

Open drfarch opened 4 years ago

drfarch commented 4 years ago

import { AwesomeButtonProgress } from 'react-awesome-button'; import AwesomeButtonStyles from 'react-awesome-button/src/styles/styles.scss'

function Button() { return ( <AwesomeButtonProgress cssModule={AwesomeButtonStyles} type="primary" onPress={next => { // do a sync/async task then call next() console.log("test"); next() }}

Button ); }

i tried this code that i get from 'AwesomeButtonProgress basic example' docs

kian2attari commented 4 years ago

I just went through the same thing. Just replace onPress with action and it should work!

Example:

<AwesomeButton
  type="primary"
  role="button"
  action={() => {
    alert('button pressed');
  }}
>
  Portfolio
</AwesomeButton>
pierreericgarcia commented 2 years ago

It's a bug, next is the second parameter !

The problem is that the first argument of the onPress's callback function is not the next function but the ref of the <Button/> (so it returns us a <span/>). The next function is actually the second parameter of the callback function.

<AwesomeButton
  type="primary"
  role="button"
  onPress={(ref, next) => {
    // next is the second parameter !
    next();
  }}
>
  Portfolio
</AwesomeButton>

Either the documentation is incomplete, either it's a bug that needs to be fixed. I'll make a PR proposing an update to the current documentation.