Highlighting value change ReactJS

react prop object change
react on props change
change props value react
react devtools highlight updates
react hooks props change
react check if property changed
react watch
react track changes

I am using ReactJS, and I was wondering whether it is possible to highlight an element in the DOM when its value has been changed.

I have a list of elements whose values update periodically. While I have no problem animating in the DOM new items coming in to the list or items leaving the list using React's animation library interface, I am struggling to figure out how to detect the actual value change of the existing elements in the list.

Any ideas on how to do so? Thank you!

If your new values are coming down as new props, then you can use the componentWillReceiveProps lifecycle method on the component. It is called just before the component is updated.

Within that method, you can compare the new values (passed as the argument to the method) and the old values (available as this.props).


For instance:

componentWillReceiveProps: function(newProps) {
    if(this.props.query != newProps.query) {
        //handle change of query prop
        //may include calls to this.setState()
    }
}

Reacting to Prop Changes in a React Component, The implementation of the text highlighting will set the component on mount and unmount, or when specified values have been changed. Highlighting value change ReactJS I am using ReactJS, and I was wondering whether it is possible to highlight an element in the DOM when its value has been changed. I have a list of elements whose values update periodically.

I had the same problem, then I decided to create a generic small module to handle it everywhere, that you can install from here

https://www.npmjs.com/package/react-change-highlight

using

yarn add react-change-highlight

what you can do to use it is to wrap you part that you want to highlight inside the component itself as follow

import ChangeHighlight from 'react-change-highlight';

export default () => {
  const [count, setCount] = useState(0);

  return (
    <ChangeHighlight>
      <div ref={React.createRef()}>{count}</div>
    </ChangeHighlight>
  );
}

and you will find the highlight on change as in the example below

I hope you find this useful

medhatdawoud/react-change-highlight: a react component , a react component to highlight changes in the wrapped component to enhance the UX and grab the focus of the user into the changed value of some parts like  React component for syntax highlighting. Contribute to akiran/react-highlight development by creating an account on GitHub.

Assuming that your elements are input elements, you need to use the onChange event listener. If you want to highlight that element, I would suggest having a CSS class that highlights the element and then conditionally applying it in render() based on state (or props if a child).

So for instance, you can have one component, add a handler function and the appropriate listener in the render():

handleChange: function(evt) {
    //input was changed, update component state (or call parent method if child)
    this.setState({changed: true});
},

render: function() {
    return (<div>
        <input type="text" 
               className={this.state.changed ? 'highlight' : ''}
               onChange={this.handleChange}
         />
    </div>);
}

That should set you in the right direction.

react-change-highlight, React component to highlight the changed content immediately and the UX and grap the focus of the user into the changed value of some  Specifying the value prop on a controlled component prevents the user from changing the input unless you desire so. If you’ve specified a value but the input is still editable, you may have accidentally set value to undefined or null. The following code demonstrates this. (The input is locked at first but becomes editable after a short delay.)

react-syntax-highlighter, syntax highlighting component for react with prismjs or highlightjs ast using the changing DOM instead of completely overwriting it on any change, and wrapLines - a boolean value that determines whether or not each line  Event: change The change event triggers when the element has finished changing. For text inputs that means that the event occurs when it loses focus. For instance, while we are typing in the text field below – there’s no event.

Forms – React, An input form element whose value is controlled by React in this way is called a <label> Name: <input type="text" value={this.state.value} onChange={this. Syntax highlighting component for React using the seriously super amazing lowlight and refractor by wooorm. Check out a small demo here and see the component in action highlighting the generated test code here. For React Native you can use react-native-syntax-highlighter. Install. npm install react-syntax-highlighter --save. Why This One?

Get value of highlighted option in React-Select - reactjs - html, I solved it by using onChange props. UI/Select component class CustomSelect extends React.PureComponent<IProps> { handleChange = (selectedOption: any​)  This example renders a different greeting depending on the value of isLoggedIn prop. Element Variables . You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn’t change. Consider these two new components representing Logout and Login buttons:

Comments
  • There's a lifecycle method fired when properties change: facebook.github.io/react/docs/…
  • Thank you very much @Laizer. I am trying to implement this and it should work well. However, I am not sure why, but at rerenderings this.props become react formatted objects rather than an originally passed in array. Is this specific to how reactJS operates?
  • That doesn't sound right. props of a component don't change at all; they should have the same value they were assigned with. I'm wondering if your component props perhaps got rewritten in your component logic? Modifying props in React is a no-no. I added an example above, from live code, of checking for a change in props.
  • @Lazier. Thank you very much! I got this one working
  • I'm curious - what had cause this.props to have strange values?
  • @Lazier As you said, the props have been modified directly. It was a beginner mistake: I have created a variable pointing to the array in the props. To fix it, instead I created another array and copied the values of the props in, and only then created ReactElements based on the new copy
  • This will highlight if the user types something in the box, is that what @AnikDang wants? I thought they wanted a highlight when the data changes without the user causing it.
  • To be honest, I'm not sure based on the OP. It doesn't specify what the elements are or how they change.
  • But if you think about it... The highlight is to bring attention attention to the fact that the data just changed, if the user changed it, it's kind of pointless, even annoying
  • Sometimes input change colors when dealing with validation systems (i.e. you start to type an incorrectly formatted input and the field highlights red while you type until it is correct). I had assumed OP was asking for something like that. Maybe that was an incorrect assumption. Again, the post is not incredibly clear.
  • agree, just taking my best guess based on what was said