Is there any way to define a custom attribute in react similar to angular?

Question

Consider the usecase. I want to have a tooltip functionality in my react application. The way I want to set it up is when I write <input type="text" tooltip="Enter your name here">, this should apply tooltip saying "Enter your name here" on the textbox. This should be applicable to any eligible element in my app. So that whenever I need to apply a tooltip on any element, I just need to write tooltip="..." attribute on it.

I am familiar that in AngularJS you might go about it something like this.

angular.module('app')
.directive('tooltip', function() {
  return {
    restrict: 'A',
    link: function($scope, $el) {
       // Apply Tooltip through JS or applying right CSS class
    }
  }
}

But I am not sure if there's something similar available in React. Or may be if it needs to be constructed, how should I approach creating something like this.

The problem here would be.. do you want to apply tooltip to DOM elements with attribute "tooltip" or to React Nodes which have a prop "tooltip" specified? The solution would be different.. — Daniel Khoroshko
– Daniel Khoroshko, Commented Feb 3, 2018 at 7:29
Actually I won't be able to give a more or less proper solution for the second case — Daniel Khoroshko
– Daniel Khoroshko, Commented Feb 3, 2018 at 7:30
Actually I wanted to apply tooltip to DOM elements.The first case basically. Because for the React Nodes, I can define the behavior when tooltip prop is encountered. — Keyur Golani
– Keyur Golani, Commented Feb 3, 2018 at 7:56

Estus Flask · Accepted Answer · 2018-02-03 09:36:33Z

The question is basically whether React has the concept of directives. And the answer is no.

React offers components that are supposed to be composed. As opposed to Angular components, React components don't necessarily create DOM elements, so nested components won't put restrictions on the layout.

So tooltip should be defined as a component:

class Tooltip extends React.Component {
  render() {
    const child = React.Children.only(this.props.children);

    return React.cloneElement(
      child,
      { className: classNames(child.props.className, 'tooltip') }
    );
  }

  componentDidMount() {
    const childElement = ReactDOM.findDOMNode(this).children[0];
    const tooltipText = this.props.title;
    // init a tooltip
  }

  componentWillUnmount() {
    // clean up a tooltip
  }
}

And used like:

<Tooltip title="foo"><Foo/></Tooltip>

Daniel Khoroshko · Accepted Answer · 2018-02-03 07:36:50Z

0

This it could be something like that.. though I wouldn't recommend fiddling with DOM really.

class TooltipProvider extends React.Component {
  componentDidMount() {
    document.querySelectorAll('[tooltip]').forEach(el => {
       // set up a tooltip
    });
  }

  componentDidUpdate() {
    document.querySelectorAll('[tooltip]').forEach(el => {
       // set up a tooltip
    });
  }


  render() {
    return children;
  }

}

// somwhere in your app

return () {
   <TooltipProvider>
      // The rest of the app
   </TooltipProvider>
}

answered Feb 3, 2018 at 7:36

Daniel Khoroshko

2,7411 gold badge20 silver badges28 bronze badges

6 Comments

Keyur Golani Over a year ago

Wow this looks promising. You would be able to access the value of tooltip attribute by using el variable right? I think this might work.

Daniel Khoroshko Over a year ago

right. but I can't predict what wil happen if DOM changes... needs testing

Daniel Khoroshko Over a year ago

also there might be some performance issue.. that's all I could come up with. isn't there more "react" way of doing you tooltips? Like you could have a "withTooptip" HOC or something like that..

Keyur Golani Over a year ago

I didn't find any. Hence the question. However, I can test this way. And check may be some ready modules how they are implemented. But I don't want to use the modules as they are. Thanks a lot though.

Daniel Khoroshko Over a year ago

...Good luck...!

|

Collectives™ on Stack Overflow

Is there any way to define a custom attribute in react similar to angular?

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related