CODEWITHSUNDEEP
angularjs-directivereactjs
ccnokes
ccnokes

Reputation: 7115

What is the React equivalent of an Angular directive that only works on attributes?

For example you could have a directive in angular like so:

angular.module('app')
.directive('classy', function() {
  return {
    restrict: 'A',
    link: function($scope, $el) {
       $el.addClass('stay-classy');
    }
  }
}

And implement like so: 

<div classy></div>

There doesn't seem to be an equivalent in React that I've seen after reading through most the docs and googling. I was hoping for something like: 

...
render: function() {
  return (
     <MyComponent classy></MyComponent>
  );
}

Is there something like that possible that I've been missing? Is there a different yet functionally similar equivalent? Or maybe this question just shows that I'm missing some part of the "React way" and I shouldn't ever want to do this. Thanks!

Upvotes: 36

Views: 37267

Answers (5)

Martin Paucot
Martin Paucot

Reputation: 1251

I was looking to find a way to reproduce the directive system for applying style or play with the component.

You can create a component that play with children and then render them :

function TextCenter(props) {

  // Iterates over children and clone it with custom props
  const children = React.Children.map(
    props.children,
    (child) => React.cloneElement(child, { className: 'text-center' }
  )

  // Render the children
  return <>{children}</>;
}

function MyComponent() {
  return (
    <TextCenter>
      <div>
        <h1>Hello centered world</h1>
        <p>Yessss</p>
      </div>
    </TextCenter>
  )
}

Here is a more powerfull example for responsive text alignement :

interface Props extends Breakpoints<'start' | 'center' | 'end'>{}

export const TextAlign: FunctionComponent<Props> = (props) => {
  const className = generateClassName('text', props);
  const children = React.Children.map(props.children, child => React.cloneElement(child as ReactElement, { className }))

  return (
    <>
      {children}
    </>
  )
}

export const MyComponent: FunctionComponent<Props> = (props) => {
  return (
    <div>
      <TextCenter xs="center" md="start">
        <h1>I am centered on mobile but not on desktop</h1>
      </TextCenter>
    </div>
  )
}

There are two problems with this solution, when the children is a component, it must also have the prop className and it also makes the HTML less clean as it adds a level in hierarchy.

Upvotes: 2

Mohammed Ramadan
Mohammed Ramadan

Reputation: 723

Look my friend i didn't get you well but long story short, angularJS directives is actually a component. So the idea behind angularJs directive is to create component that has its own scope data and it's own method to operate on it. I was thinking the same way you did and found your post here and i couldn't find an answer for that. But thanks for working experience, i thought about it and know how to do it.

I wanted to add an edit button for each link item in a list to toggle the edit form for each one only so each ListItem should be a stand alone component, that way i have standalone state for each one and i toggle it on & off.

enter image description here

Upvotes: -1

Bo Lora
Bo Lora

Reputation: 41

A great example of a useful directive in angular is 

<a href="#target" class="smooth-scroll">Target</a>

The smoothScroll directive would intercept the click event then use window scroll or jquery scrollTo to apply all manner of animation.

Anywhere in the html one could then simply use the directive powered class name.

This sort of thing is not available in React. To do it in React you would have to create a special link component to use instead of:

<a> like ASmooth....

Upvotes: 4

Jordan Running
Jordan Running

Reputation: 106077

It will be helpful to consider what Angular and React are each doing "behind the scenes."

In your Angular example, when you write <div classy/></div> you're saying "render a DIV element and then attach to it the behaviors defined by the classy directive.

In your React example, when you write <MyComponent classy></MyComponent>, you're saying, "create an instance of MyComponent and pass it the props { classy: true }. The transpiler (Babel or whathaveyou) will turn it into the following JavaScript:

React.createElement(MyComponent, { classy: true });

So the answer to your question is that you can't write <MyComponent classy></MyComponent> because MyComponent component doesn't know what to do with the classy prop. In React, you might write something like this instead:

class ClassyDiv extends React.Component {
  render() {
    const { className, ...rest } = this.props;
    return <div className={`${className || ''} stay-classy`} {...rest}/>;
  }
}

This works because we know the React.DOM.div component (like most DOM components) knows what to do with the className prop.

Since React 0.14 we can express something like this more simply, as a "pure" stateless functional component, i.e. a function that accepts props and returns the rendered result:

function AlsoClassyDiv(props) {
  const { className, ...rest } = props;
  return <div className={`${className || ''} stay-classy`} {...rest}/>;
};

You can see both approaches in action in the below snippet.

class ClassyDiv extends React.Component {
  render() {
    const { className, ...rest } = this.props;
    return <div className={`${className || ''} stay-classy`} {...rest}/>;
  }
}

function AlsoClassyDiv({ className, ...props }) {
  return <div className={`${className || ''} stay-classy`} {...props}/>;
};

ReactDOM.render(
  <div id="container">
    <div>Regular div</div>
    <ClassyDiv>ClassyDiv!</ClassyDiv>
    <AlsoClassyDiv>AlsoClassyDiv!</AlsoClassyDiv>
  </div>,
  document.body
);
.stay-classy { font: bold 3em Helvetica; text-shadow: 4px 4px 2px #aaa; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Upvotes: 37

Alon Burg
Alon Burg

Reputation: 2550

One way you could implement similar behavior is using React class mixins

Upvotes: 7

Related Questions