Skip to content

Instantly share code, notes, and snippets.

@netojose
Created August 21, 2022 20:10
Show Gist options
  • Save netojose/a6c512516bc956c11c51ccf1fa936554 to your computer and use it in GitHub Desktop.
Save netojose/a6c512516bc956c11c51ccf1fa936554 to your computer and use it in GitHub Desktop.
Create styled react generator function
import { css, CssObject } from 'g-style'
import { createElement, ReactNode, HTMLProps } from 'react'
import filterInvalidDOMProps from 'filter-invalid-dom-props'
interface CProps extends HTMLProps<HTMLParamElement> {
children: ReactNode
}
export default function styled<T>(
tag: string,
styles: CssObject | ((props: Omit<CProps & T, 'children'>) => CssObject)
) {
return ({ children, ...props }: CProps & T) => {
const className = css(styles instanceof Function ? styles(props) : styles)
const filteredProps = filterInvalidDOMProps(props)
return createElement(tag, { ...filteredProps, className }, children)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment