We Keep Coding

Overriding onClick in React

This is somewhat of weird question. I'm working with event types in React, and we want to use onClick in some instances, and onPointerDownCapture in others (for reasons). But to make this more general, it could be any two different click-like events. The issue is that while we can assign whatever function handler on the right side of the expression, the left side has to be static, essentially. So,
<button
onClick={handler} vs onPointerDownCapture={handler} vs onMouseDown={handler}
/>
I think just using onPointerDownCapture will be fine for most usecases, but in a perfect world, I'd be able to flip between these at runtime based on other variables. Is it possible to override the onClick on the button/div/whatever prototype or something to be whatever event type I want it to be?
Much googling. No success.

I didn’t fully understand what you mean by “overriding onClick”, but
The issue is that while we can assign whatever function handler on the right side of the expression, the left side has to be static, essentially.
This is not true, left hand side could be dynamic, here’s how:
<button {...({ [eventName]: handler })} />
I guess this solves your problem.
Ok above syntax is a bit terse and admittedly confusing. It’s the good old JSX spread props syntax, just over an inline object literal.
I’ll give you another equivalent form, hopefully it should be more readable.
const eventName = someCondition ? "onPointerDownCapture" : "onClick"
const props = {
[eventName]: handler
}
<button {...props} />

You have to use those attribute names and you use the same function name for all 3 of them.
What these 3 attributes do is they register the associated event.
Maybe you could use a useEffect and add there conditionally an event listener instead of the proposed React attributes.

I think best is #vera solution in comment. Pass extra prop to component (for example isOnClick), and based on it pass either callback or undefined to event handler prop:
function Component(props: { isOnClick: boolean; callback: () => void }) {
return (
<div
onClick={props.isOnClick ? props.callback : undefined}
onMouseDown={props.isOnClick ? undefined : props.callback}
/>
);
}
Note that passing undefined to prop is same as not setting that prop.
Alternatively conditionaly return component:
function Component(props: { isOnClick: boolean; callback: () => void }) {
if (props.isOnClick) {
return <div onClick={props.callback}/>
} else {
return <div onMouseDown={props.callback}/>
};
}

uses of html attribute "ref" in vuejs

What are the use cases which require the use of the HTML attribute ref?
And what would be the value affected to it?
I've faced this example:
methods: {
myMethod(event) {
this.$refs.userInfo.open();
},
}
<template>
<myComponent
ref="userInfo"
:usr="usr" />
</template>
So my question what is userInfo really is?
From where comes open method ?

Template refs is a way of accessing the element itself in the DOM.
It's usually used to make some DOM-specific things or to handle some edge-cases (like a vanilla JS package not fully compatible with Vue's reactivity).
If not needed, you could use regular event listeners + iterations with v-fors.
In your given example, you're accessing either a component userInfo or a method/object with a public method of open. I recommend that you inspect your DOM tree in your Vue devtools.

Typescript typing a reference for third party custom components (react-player)

Description
I'm struggling to add the type annotation of a useRef attached on this player component: react-player to get access to the seekTo instance method as per the documentation demo source code. I can't seem to get the type to work - I'm kinda new to typescript and probably going about this wrong so any pointers would be helpful! I've looked at the react-player index.d.ts and can see the function is listed there, just need to know how I'm supposed to be writing this in.
Expected Behavior
Have access to the instance methods of the player.
Error
Property 'seekTo' does not exist on type 'MutableRefObject<ReactPlayer | null>'.ts(2339)
Steps to Reproduce
I made a small codeSandbox - basically trying to mimic the demo source for adding a ref to utilise the seekTo method onMouseUp on a range type input.
https://codesandbox.io/s/react-typescript-lqgvr?file=/src/index.tsx
Thanks!

A few things regarding your code:
To access a ref, use ref.current instead of ref..
The ref can be null, so you have to check if it is null
Use currentTarget of the event to access the value instead of target.
onMouseUp={(e) => {
if (player.current) {
player.current.seekTo(parseFloat(e.currentTarget.value));
}
}}

I'm on a project using TS with React. I was able to get everything working by declaring:
const player = useRef<ReactPlayer>(null);
And then in my :
<ReactPlayer ref={player} />
So any time I need to use a function like seekTo() it looks like:
player?.current?.seekTo(seconds);
No need to use:
import { BaseReactPlayerProps } from 'react-player/base';

I have been struggling with this too.
import { BaseReactPlayerProps } from 'react-player/base';
const MyPlayer = ({playerRef : BaseReactPlayerProps}) => {
// component code
if (playerRef) {
currentPlayerRef.seekTo(seconds, 'fraction');
}
}

What are the difference between reactJS props and refs?

I am getting confused with props and refs in ReactJS. Can anybody explain me the difference between them with proper example.
Thanks in advance.

Props are used to pass parameters which should be static (on the contrary of state). For example you can pass a size or name from an upperView to a lowerView (nested views);
Interesting part on props: https://facebook.github.io/react/docs/transferring-props.html
refs are used to acces the real DOM and not the virtual DOM of react. It's needed when you need to access the real DOM.
This part is interesting :https://facebook.github.io/react/docs/more-about-refs.html
this.setState({userInput: ''}, function() {
// This code executes after the component is re-rendered
React.findDOMNode(this.refs.theInput).focus(); // Boom! Focused!
});
The example above show you how to access a DOM element properly when the state is updated.
Hope it helps.

For sure there are differences between, one mostly use for selecting the DOM, one for getting data as a property, I create the image below and explain few major differences:
Also this the sample of grandparent, parent and child components which using ref and props to pass data, it's a good example to understand when and how they get used, please pay attention how ref helping to get in deeper component by referencing to the element:
function Child(props) {
return (
<div>
<input ref={props.inputRef} />
</div>
);
}
function Parent(props) {
return (
<div>
My input: <Child inputRef={props.inputRef} />
</div>
);
}
class Grandparent extends React.Component {
render() {
return (
<Parent
inputRef={el => this.inputElement = el}
/>
);
}
}

Those are two different things.
Props: Use them to pass any parameters to your component.
Refs: Shortcut for references. These are references to your DOM elements. Use them if you need to access raw DOM element for some reason. For example to add custom event handler via .addEventListener() function.

in addition to the answer above by François Richard, u might wanna read:
https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
because the confusion is more often between state and props.
good luck

React's getDOMNode always return component's root DOM node instead of reffed one

I am struggling to use refs in React. They always return root DOM node of the component instead of reffed one.
Please consider the following example:
var AuthApp = React.createClass({
onSubmitClick: function(event) {
var usernameInput = this.getDOMNode(this.refs.username);
// This logs root <div> instead of <input>, why???
console.log(usernameInput);
},
render: function() {
return (
<div>
<input type="text" ref="username"/>
<input type="password" ref="password"/>
<input type="submit" onClick={this.onSubmitClick} />
</div>
);
}
});
I've inspected the code in excellent Chrome React addon, and it seems that this.refs.username properly reflects <input> tag:
Something wrong happens when I call this.getDOMNode - it returns root <div> specified in render() instead of <input>.
This code comes from React 0.12, but I've tried to do the same on 0.13 (I am aware of change to React.findDOMNode()) and I get the same result.
What am I doing wrong?

You should be using
var usernameInput = React.findDOMNode(this.refs.username);
to get a reference to the component's DOM node using refs.
The getDOMNode method has been deprecated
getDOMNode is deprecated and has been replaced with
React.findDOMNode().

You should use this.refs['username'].getDOMNode(). But maybe in newer versions of React you better use React.findDOMNode, as adeneo adviced.

To expand on adeneo's answer, instead of doing React.findDOMNode(this.refs.username) you can simply do this.refs.username because the ref that is returned is the DOM Node.
See this link for the reference:
https://facebook.github.io/react/blog/2015/10/07/react-v0.14.html#dom-node-refs