React Router/6/Remove ActiveStyleprops
This codemod updates NavLink
components that use separate style
and activeStyle
props to the modern isActive
function in react-router-dom
. It simplifies the logic by combining the two props into a single style
prop with conditional styling.
Before
<NavLink to="/home" style={{ color: 'blue' }} activeStyle={{ color: 'red' }}>Home</NavLink>
After
<NavLink to="/home" style={({ isActive }) => ({ color: isActive ? 'red' : 'blue' })}>Home</NavLink>
This makes the component more concise and aligns it with the newer API for conditional styles based on the isActive
property.
Build custom codemods
Use AI-powered codemod studio and automate undifferentiated tasks for yourself, colleagues or the community