Toggle Class On Prop Change

A component that toggles a class of its children when a prop changes.

Useful when you have real-time applications and want to show a part of the component got updated.

<tbody>
  {this.state.teams.map(team => {
    return (
      <ToggleClassOnPropChange team={team} key={team.name} className="yellow" elapsedTime={500}>
        <tr>
          <th>{index + 1}</th>
          <th>{team.name}</th>
          <th>{team.points}</th>
        </tr>
      </ToggleClassOnPropChange>
    );
  })}
</tbody>

Everytime team prop passed to ToggleClassOnPropChange changes, the yellow class is added to the tr and removed 500ms after.

Special thanks to

• Pepe Señaris for discussing the approach with me

Missing

• Tests

• Tests

• Tests

• Tests

• Tests

• Tests

• More tests