Using the createElement override with Typescript

[jschr]

This isn't really an issue, just thought it's worth making a note in case this helps anyone else. Feel free to close.

I'm a fan of using the createElement override and I spent a bit of time figuring how to get this working nicely with Typescript.

Here's what I came up with:

Re-export createElement and add the css prop to the HTMLAttributes and SVGAttributes interfaces:

// createElement.ts
import { createElement } from 'glamor/react'

declare module 'react' {
  interface HTMLAttributes<T> {
    css?: any
  }

  interface SVGAttributes<T> {
    css?: any
  }
}

export default createElement

Tell TS to use our createElement for JSX with this tsconfig:

{
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "createElement"
  }
}

Usage:

// MyComponent.tsx
import createElement from './createElement'

export default function MyComponent() {
  return <div css={{ color: 'red' }} />
}

[donaldpipowitch]

This is awesome, thank you. I'll leave this open for now. Maybe we can add it to the docs later!

[threepointone]

thanks for this! added a link to this issue from the docs