-
Notifications
You must be signed in to change notification settings - Fork 0
Migration from cmdk
ABCrimson edited this page Mar 7, 2026
·
2 revisions
The @crimson_dev/command-codemod package provides 4 jscodeshift transforms:
pnpm add -D @crimson_dev/command-codemod # Run all transforms npx command-codemod import-rewrite "src/**/*.tsx" npx command-codemod data-attrs "src/**/*.tsx" npx command-codemod forward-ref "src/**/*.tsx" npx command-codemod should-filter "src/**/*.tsx"
Preview changes without writing files:
npx command-codemod import-rewrite "src/**/*.tsx" --dry-run- import { Command } from 'cmdk' + import { Command } from '@crimson_dev/command-react'
Handles: named imports, default imports, export * from, import(), require().
- <div cmdk-root="" /> + <div data-command="" />
- querySelector('[cmdk-item]') + querySelector('[data-command-item]')
Full mapping: cmdk-root → data-command, cmdk-input → data-command-input, cmdk-list → data-command-list, cmdk-item → data-command-item, cmdk-group → data-command-group, cmdk-separator → data-command-separator, cmdk-empty → data-command-empty, cmdk-loading → data-command-loading.
CSS variables: --cmdk-list-height → --command-list-height.
- const MyComponent = React.forwardRef<HTMLDivElement, Props>((props, ref) => { - return <div ref={ref} {...props} />; - }); + const MyComponent = ({ ref, ...props }: Props & { ref?: React.Ref<HTMLDivElement> }) => { + return <div ref={ref} {...props} />; + };
React 19 no longer needs forwardRef — ref is a normal prop.
- <Command shouldFilter={false}> + <Command filter={false}>
shouldFilter={true} and bare shouldFilter are removed (filter defaults to true).
| cmdk | @crimson_dev/command-react |
|---|---|
import { Command } from 'cmdk' |
import { Command } from '@crimson_dev/command-react' |
[cmdk-item] |
[data-command-item] |
--cmdk-list-height |
--command-list-height |
React.forwardRef |
ref as prop |
shouldFilter |
filter |
| React 18 | React 19+ required |