## Example This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts import React from 'react'; import PropTypes from 'prop-types'; import { makeStyles, useTheme } from '@material-ui/styles'; import classNames from 'classnames'; import Button from '../../../../components/controls/Button'; import ButtonLoader from '../../../../components/loaders/ButtonLoader'; import makeStateElementName from '../../../../theme-editor/utils/makeStateElementName'; const useStyles = makeStyles((theme) => ({ stakeButton: ({ editorId }) => ({ width: '100%', height: 40, fontWeight: 600, ...theme[editorId], }), stakeButtonDisabled: ({ editorId }) => ({ ...theme[`${makeStateElementName(editorId, 'disabled')}`], }), '@media (hover: hover)': { stakeButtonDisabled: ({ editorId }) => ({ '&:hover': { ...theme[`${makeStateElementName(editorId, 'disabled')}`], }, }), }, loaderContainer: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }, })); const StakeInputButton = ({ onClick, isDisabled, children, className, isLoading, dataEditorId, }) => { const classes = useStyles({ editorId: dataEditorId }); const theme = useTheme(); return ( < Button elementClasses = { { default: classNames(classes.stakeButton, className), disabled: classes.stakeButtonDisabled, } } disabled = { isDisabled } onClick = { onClick } style = { { padding: 0, } } dataEditorId = { dataEditorId } > { isLoading ? ( < div className = { classes.loaderContainer } > < ButtonLoader color = { theme.brandButton.color } /> < /div> ) : ( children ) } < /Button> ); }; StakeInputButton.propTypes = { dataEditorId: PropTypes.string, }; StakeInputButton.defaultProps = { dataEditorId: 'betslipPlaceBetButton', }; export default StakeInputButton; ``` ### After ```ts import React from 'react'; import PropTypes from 'prop-types'; import { makeStyles, useTheme } from '@material-ui/styles'; import classNames from 'classnames'; import Button from '../../../../components/controls/Button'; import ButtonLoader from '../../../../components/loaders/ButtonLoader'; import makeStateElementName from '../../../../theme-editor/utils/makeStateElementName'; const useStyles = makeStyles((theme) => ({ stakeButton: ({ editorId }) => ({ width: '100%', height: 40, fontWeight: 600, ...theme[editorId], }), stakeButtonDisabled: ({ editorId }) => ({ ...theme[`${makeStateElementName(editorId, 'disabled')}`], }), '@media (hover: hover)': { stakeButtonDisabled: ({ editorId }) => ({ '&:hover': { ...theme[`${makeStateElementName(editorId, 'disabled')}`], }, }), }, loaderContainer: { width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', }, })); const StakeInputButton = ({ onClick, isDisabled, children, className, isLoading, dataEditorId = 'betslipPlaceBetButton', }) => { const classes = useStyles({ editorId: dataEditorId }); const theme = useTheme(); return ( < Button elementClasses = { { default: classNames(classes.stakeButton, className), disabled: classes.stakeButtonDisabled, } } disabled = { isDisabled } onClick = { onClick } style = { { padding: 0, } } dataEditorId = { dataEditorId } > { isLoading ? ( < div className = { classes.loaderContainer } > < ButtonLoader color = { theme.brandButton.color } /> < /div> ) : ( children ) } < /Button> ); }; StakeInputButton.propTypes = { dataEditorId: PropTypes.string, }; export default StakeInputButton; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts // In react 19 default props should be replaced with js default function parameters import React from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { makeStyles } from '@material-ui/styles'; import classNames from 'classnames'; import Button from '../../../components/controls/Button'; import { selectors as betsSelectors } from '../../../redux/ducks/bets'; import useOfflineBooking from '../hooks/useOfflineBooking'; const useStyles = makeStyles({ bookingButton: { width: '100%', fontWeight: 600, }, }); const BookingCodeBookButton = ({ className, dataEditorId }) => { const { makeBooking } = useOfflineBooking(); const { t } = useTranslation(); const classes = useStyles(); const selectionsValid = useSelector(betsSelectors.selectSelectionsValid); return ( < Button className = { classNames(classes.bookingButton, className) } disabled = {!selectionsValid } onClick = { () => (selectionsValid ? makeBooking() : null) } dataEditorId = { dataEditorId } > { t('Book') } < /Button> ); }; BookingCodeBookButton.propTypes = { className: PropTypes.string, dataEditorId: PropTypes.string, }; BookingCodeBookButton.defaultProps = { className: null, dataEditorId: 'betslipShareButton', }; export default BookingCodeBookButton; ``` ### After ```ts import React from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { useTranslation } from 'react-i18next'; import { makeStyles } from '@material-ui/styles'; import classNames from 'classnames'; import Button from '../../../components/controls/Button'; import { selectors as betsSelectors } from '../../../redux/ducks/bets'; import useOfflineBooking from '../hooks/useOfflineBooking'; const useStyles = makeStyles({ bookingButton: { width: '100%', fontWeight: 600, }, }); const BookingCodeBookButton = ({ className = null, dataEditorId = 'betslipShareButton', }) => { const { makeBooking } = useOfflineBooking(); const { t } = useTranslation(); const classes = useStyles(); const selectionsValid = useSelector(betsSelectors.selectSelectionsValid); return ( < Button className = { classNames(classes.bookingButton, className) } disabled = {!selectionsValid } onClick = { () => (selectionsValid ? makeBooking() : null) } dataEditorId = { dataEditorId } > { t('Book') } < /Button> ); }; BookingCodeBookButton.propTypes = { className: PropTypes.string, dataEditorId: PropTypes.string, }; export default BookingCodeBookButton; ``` ,This codemod turns X into Y. It also does Z. Note: this is a contrived example. Please modify it. ### Before ```ts // do not add new parameter if default props exist but is not defined in function parameters import React from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { makeStyles, useTheme } from '@material-ui/styles'; import ButtonArrow from '../../../../components/controls/ButtonArrow'; import SliderPoints from '../../../../components/controls/SliderPoints'; import BetSlipBonusesSlider from '../../BetSlipBonusesSlider'; import BetSlipEmptyBlock from '../../BetSlipTable/BetSlipEmptyBlock'; const useStyles = makeStyles((theme) => ({ bonusesListContainer: { background: theme.bonusPopup.background, color: theme.bonusPopup.color, paddingBottom: 20, overflowY: 'auto', boxSizing: 'border-box', }, points: { maxWidth: 200, margin: '0 auto', }, topLine: { marginBottom: 8, padding: '8px 16px', }, betSlipEmptyBlock: { minHeight: 275, }, })); const BetSlipBonusesListBase = ({ slides, currentSlide, setCurrentSlide, onCloseButtonClick, className, maxHeight, }) => { const theme = useTheme(); const classes = useStyles(); const { t } = useTranslation(); const arrowButtonBackground = theme.bonusPopup.background; return ( < div className = { `${classes.bonusesListContainer} ${className}` } style = { { maxHeight } } > < div className = { classes.topLine } > < ButtonArrow backgroundColor = { arrowButtonBackground } label = { t('Back') } onClick = { onCloseButtonClick } size = { 32 } direction = 'left' / > < /div> { slides.length > 0 ? ( < > < BetSlipBonusesSlider items = { slides } currentSlide = { currentSlide } setCurrentSlide = { setCurrentSlide } /> { !!slides.length && ( < div className = { classes.points } > < SliderPoints count = { slides.length } activeIndex = { currentSlide } color = { theme.bonusPopup.color } activeColor = { theme.bonusPopup.color } /> < /div> ) } < /> ) : ( < BetSlipEmptyBlock text = { t('No available Bonuses at this moment') } className = { classes.betSlipEmptyBlock } /> ) } < /div> ); }; BetSlipBonusesListBase.propTypes = { className: PropTypes.string, placeholder: PropTypes.string, // for widgets showBonusesForBet: PropTypes.string, toggleChooseBonusBlock: PropTypes.func.isRequired, onUseBonus: PropTypes.func.isRequired, onActivateBonus: PropTypes.func.isRequired, availableBonusesIds: PropTypes.arrayOf(PropTypes.string), bonuses: PropTypes.objectOf(PropTypes.shape({})).isRequired, }; BetSlipBonusesListBase.defaultProps = { placeholder: null, className: null, showBonusesForBet: null, availableBonusesIds: null, }; export default BetSlipBonusesListBase; ``` ### After ```ts import React from 'react'; import PropTypes from 'prop-types'; import { useTranslation } from 'react-i18next'; import { makeStyles, useTheme } from '@material-ui/styles'; import ButtonArrow from '../../../../components/controls/ButtonArrow'; import SliderPoints from '../../../../components/controls/SliderPoints'; import BetSlipBonusesSlider from '../../BetSlipBonusesSlider'; import BetSlipEmptyBlock from '../../BetSlipTable/BetSlipEmptyBlock'; const useStyles = makeStyles((theme) => ({ bonusesListContainer: { background: theme.bonusPopup.background, color: theme.bonusPopup.color, paddingBottom: 20, overflowY: 'auto', boxSizing: 'border-box', }, points: { maxWidth: 200, margin: '0 auto', }, topLine: { marginBottom: 8, padding: '8px 16px', }, betSlipEmptyBlock: { minHeight: 275, }, })); const BetSlipBonusesListBase = ({ slides, currentSlide, setCurrentSlide, onCloseButtonClick, className = null, maxHeight, }) => { const theme = useTheme(); const classes = useStyles(); const { t } = useTranslation(); const arrowButtonBackground = theme.bonusPopup.background; return ( < div className = { `${classes.bonusesListContainer} ${className}` } style = { { maxHeight } } > < div className = { classes.topLine } > < ButtonArrow backgroundColor = { arrowButtonBackground } label = { t('Back') } onClick = { onCloseButtonClick } size = { 32 } direction = 'left' / > < /div> { slides.length > 0 ? ( < > < BetSlipBonusesSlider items = { slides } currentSlide = { currentSlide } setCurrentSlide = { setCurrentSlide } /> { !!slides.length && ( < div className = { classes.points } > < SliderPoints count = { slides.length } activeIndex = { currentSlide } color = { theme.bonusPopup.color } activeColor = { theme.bonusPopup.color } /> < /div> ) } < /> ) : ( < BetSlipEmptyBlock text = { t('No available Bonuses at this moment') } className = { classes.betSlipEmptyBlock } /> ) } < /div> ); }; BetSlipBonusesListBase.propTypes = { className: PropTypes.string, placeholder: PropTypes.string, // for widgets showBonusesForBet: PropTypes.string, toggleChooseBonusBlock: PropTypes.func.isRequired, onUseBonus: PropTypes.func.isRequired, onActivateBonus: PropTypes.func.isRequired, availableBonusesIds: PropTypes.arrayOf(PropTypes.string), bonuses: PropTypes.objectOf(PropTypes.shape({})).isRequired, }; export default BetSlipBonusesListBase; ```

Use case

Framework

Owner

React 17 Default Props To Params

Example

Classnames To Clsx