4a:I[660678,["/_next/static/chunks/2ju3u__ap0hyk.js","/_next/static/chunks/18lvvidnvyu2n.js","/_next/static/chunks/13vqyfldau57p.js","/_next/static/chunks/1gbl-dcot4vlq.js","/_next/static/chunks/0cnrn8dx8wpm6.js","/_next/static/chunks/2ugxrg8mt6ccc.js","/_next/static/chunks/438opm-7dltqc.js","/_next/static/chunks/3cg_rmcze195r.js","/_next/static/chunks/40fmu66fmb8tm.js","/_next/static/chunks/1sh719482-5um.js","/_next/static/chunks/2i4xo8xu-dpuk.js","/_next/static/chunks/1gth09_ur0iam.js","/_next/static/chunks/2e4udl7tfg2xd.js","/_next/static/chunks/3vehc-g2atkra.js","/_next/static/chunks/0_ubjgr-ozi1n.js","/_next/static/chunks/2a4jc680f5x-9.js","/_next/static/chunks/0pp6seif9t0rh.js","/_next/static/chunks/1jgqrwqmgs4tj.js","/_next/static/chunks/277eo_8fub99_.js","/_next/static/chunks/2md3whhhv655w.js","/_next/static/chunks/0r86cplnpkdza.js","/_next/static/chunks/2ghxk472-g0i6.js","/_next/static/chunks/3gty9faxzaaqv.js","/_next/static/chunks/1etob1pib8o7l.js","/_next/static/chunks/3tucnq-ajk0fw.js","/_next/static/chunks/0wplpp9j9_3o4.js","/_next/static/chunks/2641m2aqdum9a.js","/_next/static/chunks/2t_5zfez2-77k.js","/_next/static/chunks/1qsa_rj-5yj90.js","/_next/static/chunks/3t7z44cjl4fyh.js","/_next/static/chunks/2l8l4_a9-xhts.js","/_next/static/chunks/1eg--hbclw9zd.js","/_next/static/chunks/420r01bgqs0-c.js","/_next/static/chunks/0ojgzwcpt7vsk.js","/_next/static/chunks/3-906s1ue5fj3.js","/_next/static/chunks/1_5ue0bs85y9-.js","/_next/static/chunks/04zz8eh1956za.js"],"HydrationBoundary"] 49:T899,{"@context":"https://schema.org","@graph":[{"@type":"WebSite","@id":"https://app.codemod.com/registry#website","url":"https://app.codemod.com/registry","name":"Codemod Registry"},{"@type":"Organization","@id":"https://app.codemod.com#org","name":"oleksiikukuruza","url":"https://app.codemod.com"},{"@type":"BreadcrumbList","@id":"https://app.codemod.com/registry/react-17-default-props-to-params#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Registry","item":"https://app.codemod.com/registry"},{"@type":"ListItem","position":2,"name":"react-17-default-props-to-params","item":"https://app.codemod.com/registry/react-17-default-props-to-params"}]},{"@type":"WebPage","@id":"https://app.codemod.com/registry/react-17-default-props-to-params#webpage","url":"https://app.codemod.com/registry/react-17-default-props-to-params","name":"react-17-default-props-to-params - Codemod Registry","description":"Package details for react-17-default-props-to-params","isPartOf":{"@id":"https://app.codemod.com/registry#website"},"author":{"@id":"https://app.codemod.com#org"},"breadcrumb":{"@id":"https://app.codemod.com/registry/react-17-default-props-to-params#breadcrumb"},"mainEntity":{"@id":"https://app.codemod.com/registry/react-17-default-props-to-params#sourcecode"}},{"@type":"SoftwareSourceCode","@id":"https://app.codemod.com/registry/react-17-default-props-to-params#sourcecode","name":"react-17-default-props-to-params","url":"https://app.codemod.com/registry/react-17-default-props-to-params","publisher":{"@id":"https://app.codemod.com#org"},"isAccessibleForFree":true,"version":"1.0.0","datePublished":"2024-11-05 16:11:35.134+00","dateModified":"2024-11-05 16:11:35.134+00"},{"@type":"SoftwareApplication","@id":"https://app.codemod.com/registry/react-17-default-props-to-params#app","name":"react-17-default-props-to-params codemod","url":"https://app.codemod.com/registry/react-17-default-props-to-params","publisher":{"@id":"https://app.codemod.com#org"},"softwareVersion":"1.0.0","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"}}]}4b:T3042, ## 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; ``` 1b:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$49"}}],["$","$L4a",null,{"state":{"mutations":[],"queries":[{"dehydratedAt":1790174948432,"state":{"data":{"json":{"id":"3090","name":"react-17-default-props-to-params","displayName":"react-17-default-props-to-params","description":null,"scope":null,"visibility":"public","downloadCount":5,"executionCount":5,"createdAt":"2024-11-05 16:11:35.134+00","updatedAt":"2024-11-05 16:11:35.134+00","latestVersion":"1.0.0","keywords":[],"starCount":0,"author":"oleksiikukuruza","homepage":null,"repository":null,"license":null,"access":"public","documentation":null,"bugsUrl":null,"readme":"$4b","organization":{"id":null,"name":null,"slug":null,"avatarUrl":null},"owner":{"id":null,"username":"oleksiikukuruza","name":"oleksiikukuruza","avatarUrl":null},"isLegacy":true,"versions":[{"version":{"id":3838,"packageId":3090,"version":"1.0.0","description":"","manifest":{},"checksum":"","size":0,"downloadUrl":"","targets":[],"dependencies":[],"validated":false,"validationErrors":[],"publishedBy":"","deprecated":false,"deprecationMessage":null,"downloadCount":0,"cachedTestCases":null,"createdAt":"2024-11-05T16:11:35.134Z","updatedAt":"2024-11-05T16:11:35.134Z"},"publishedBy":{"name":"oleksiikukuruza","username":null,"id":null},"workflows":[],"insightsTemplate":null,"packageBehavior":"unknown","isBundle":false,"bundleChildren":[],"parentBundles":[]}],"distTags":{"latest":"1.0.0"},"latestPackageBehavior":"unknown","cachedTestCases":null},"meta":{"values":{"versions.0.version.createdAt":["Date"],"versions.0.version.updatedAt":["Date"]}}},"dataUpdateCount":1,"dataUpdatedAt":1790174948432,"error":null,"errorUpdateCount":0,"errorUpdatedAt":0,"fetchFailureCount":0,"fetchFailureReason":null,"fetchMeta":null,"isInvalidated":false,"status":"success","fetchStatus":"idle"},"queryKey":[["registry","getPackage"],{"input":{"name":"react-17-default-props-to-params","scope":"$undefined"},"type":"query"}],"queryHash":"[[\"registry\",\"getPackage\"],{\"input\":{\"name\":\"react-17-default-props-to-params\"},\"type\":\"query\"}]"}]},"children":"$L4c"}]] 1e:null 22:[["$","title","0",{"children":"react-17-default-props-to-params - Codemod Registry"}],["$","meta","1",{"name":"description","content":"Package details for react-17-default-props-to-params"}],["$","meta","2",{"name":"author","content":"oleksiikukuruza"}],["$","meta","3",{"name":"keywords","content":"react-17-default-props-to-params, codemod, code transformation, automated refactoring, package, registry"}],["$","meta","4",{"name":"creator","content":"oleksiikukuruza"}],["$","meta","5",{"name":"publisher","content":"Codemod"}],["$","meta","6",{"name":"robots","content":"index, follow"}],["$","meta","7",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","meta","8",{"name":"application-name","content":"Codemod Registry"}],["$","meta","9",{"name":"apple-mobile-web-app-title","content":"Codemod"}],["$","meta","10",{"name":"apple-mobile-web-app-capable","content":"yes"}],["$","meta","11",{"name":"apple-mobile-web-app-status-bar-style","content":"default"}],["$","meta","12",{"name":"format-detection","content":"telephone=no"}],["$","meta","13",{"name":"mobile-web-app-capable","content":"yes"}],["$","meta","14",{"name":"msapplication-config","content":"/browserconfig.xml"}],["$","meta","15",{"name":"msapplication-TileColor","content":"#000000"}],["$","meta","16",{"name":"msapplication-tap-highlight","content":"no"}],["$","meta","17",{"name":"theme-color","content":"#000000"}],["$","meta","18",{"name":"viewport","content":"width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"}],["$","link","19",{"rel":"canonical","href":"https://app.codemod.com/registry/react-17-default-props-to-params"}],["$","meta","20",{"property":"og:title","content":"react-17-default-props-to-params - Codemod Registry"}],["$","meta","21",{"property":"og:description","content":"Package details for react-17-default-props-to-params"}],["$","meta","22",{"property":"og:url","content":"https://app.codemod.com/registry/react-17-default-props-to-params"}],["$","meta","23",{"property":"og:site_name","content":"Codemod Registry"}],["$","meta","24",{"property":"og:locale","content":"en_US"}],["$","meta","25",{"property":"og:image","content":"https://app.codemod.com/api/og/registry/react-17-default-props-to-params"}],["$","meta","26",{"property":"og:image:width","content":"1200"}],["$","meta","27",{"property":"og:image:height","content":"630"}],["$","meta","28",{"property":"og:image:alt","content":"react-17-default-props-to-params package"}],["$","meta","29",{"property":"og:type","content":"website"}],["$","meta","30",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","31",{"name":"twitter:site","content":"@codemod"}],["$","meta","32",{"name":"twitter:creator","content":"@codemod"}],["$","meta","33",{"name":"twitter:title","content":"react-17-default-props-to-params - Codemod Registry"}],["$","meta","34",{"name":"twitter:description","content":"Package details for react-17-default-props-to-params"}],["$","meta","35",{"name":"twitter:image","content":"https://app.codemod.com/api/og/registry/react-17-default-props-to-params"}]]