Is there a well documented example of how to implement a button component?

[0x80]

While implementing a button component in React I feel like I'm reinventing the wheel without good documentation. I placed a question on stack overflow, but I'm curious to have your views / advise on this.

[madjam002]

@0x80 Do you still need help with this? The way I find best to deal with clickables/touchables is by having a component which abstracts away touch/click events, a bit like React Native's TouchableOpacity.

Example:

function Touchable(props) {
  return (
    <div onClick={props.onPress} onTouchTap={props.onPress}>
      {props.children}
    </div>
  )
}

Example usage:

<Touchable onPress={doSomething}>
  Clickable text
</Touchable>

You could then have a Button component which does a bunch of styling to make it look like a button, but under the hood it could just use your Touchable component.

[0x80]

Yes this seems like a useful abstraction. But I was also thinking about things like hover state. Since :hover is not set automatically by React afaik...

[madjam002]

Are you using CSS or inline styles?

I'd have a Button component which wrapped Touchable which would apply the styles for your button. If it's CSS you can just use :hover, otherwise just listen on mouse over and adjust the styles?

[0x80]

Thanks for the tips. I'll give it a try soon!

[madjam002]

Alright no worries, let me know how it goes!

[mathew-kurian]

@madjam002 The click event registers twice for me. Any ideas?

[madjam002]

@bluejamesbond Can you post a usage example?

[mathew-kurian]

@madjam002 The Click event was also getting fired in addition to the tap event. So a simple workaround like this solved the issue:

export function onClick(a) {
  return IS_IOS ? {onTouchTap: a} : {onClick: a};
}

<div {...onClick(() => console.log('sup!'))}></div>

Not sure if this is correct way, but seems reasonable. Please advise.