Skip to content

Commit

Permalink
Add 'as' prop to types (#846)
Browse files Browse the repository at this point in the history
Add missing type for prop `as`. 

This removes the need for the workaround proposed here:
- #180

Also, it works better because the `as` prop is only available for styled
components.
  • Loading branch information
klzns authored Jan 19, 2024
1 parent b1258e7 commit b29327e
Show file tree
Hide file tree
Showing 5 changed files with 12 additions and 3 deletions.
1 change: 0 additions & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions types/index.d.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ComponentType } from 'react'
import { ComponentType, ElementType } from 'react'
import { Config as TailwindConfig } from 'tailwindcss'

export interface TwStyle {
Expand Down Expand Up @@ -26,7 +26,7 @@ export type ScreenFn = <T = string>(
) => (styles?: string | TemplateStringsArray | TwStyle | TwStyle[]) => T

export type TwComponent<K extends keyof JSX.IntrinsicElements> = (
props: JSX.IntrinsicElements[K]
props: JSX.IntrinsicElements[K] & { as?: ElementType }
) => JSX.Element

export type TwComponentMap = {
Expand Down
4 changes: 4 additions & 0 deletions types/tests/basic/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,3 +52,7 @@ const twProperty = (
)

const csProperty = <div cs="maxWidth[100%] height[calc(100vh - 1em)]" />
const asProperty = <Button as="div" />

// @ts-expect-error basic element doesn't provide as prop
const asPropertyError = <p as="div" />
3 changes: 3 additions & 0 deletions types/tests/emotion/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,6 @@ export const ComposedLink2 = styled(Link)``

export const cssProperty = <div css={tw`bg-red-100`} />
export const csProperty = <div cs="maxWidth[100%] height[calc(100vh - 1em)]" />

export const asProperty = <Link as="button" />
export const asProperty2 = <Container as="button" />
3 changes: 3 additions & 0 deletions types/tests/styled-components/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,6 @@ export const ComposedLink2 = styled(Link)``

export const cssProperty = <div css={tw`bg-red-100`} />
export const csProperty = <div cs="maxWidth[100%] height[calc(100vh - 1em)]" />

export const asProperty = <Link as="button" />
export const asProperty2 = <Container as="button" />

0 comments on commit b29327e

Please sign in to comment.