Skip to content

Instantly share code, notes, and snippets.

@themadarchitect
Created May 9, 2024 15:01
Show Gist options
  • Select an option

  • Save themadarchitect/b1b5c9af355fe48e5905dea25f9c9b95 to your computer and use it in GitHub Desktop.

Select an option

Save themadarchitect/b1b5c9af355fe48e5905dea25f9c9b95 to your computer and use it in GitHub Desktop.
Layout type helpers
import type React from 'react';
type ComponentPropsAs<
C extends React.ElementType<any>,
T extends React.ComponentPropsWithoutRef<C>['as'],
> = Omit<
Extract<React.ComponentPropsWithoutRef<C>, { as: T }>,
'as' | 'asChild'
>;
// Omits the specified props from the component props. Autocomplete will suggest props
// of the component, but won't restrict the omittable props to those that actually exist.
type ComponentPropsWithout<
T extends React.ElementType,
O extends
| Omit<string, keyof React.ComponentPropsWithoutRef<T>>
| keyof React.ComponentPropsWithoutRef<T>,
> = Omit<React.ComponentPropsWithoutRef<T>, O & string>;
type RemovedProps = 'asChild' | 'defaultChecked' | 'defaultValue' | 'color';
export type { ComponentPropsAs, ComponentPropsWithout, RemovedProps };
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment