diff --git a/README.md b/README.md index 793de11..96709f2 100644 --- a/README.md +++ b/README.md @@ -69,10 +69,11 @@ const Render = () => { with ref forwarding ```tsx +import * as React from "react" import { styled } from "react-cva"; import { useRef } from "react"; -const Button = styled("button", true)("test", { +const Button = styled("button", React.forwardRef)("test", { variants: { margin: { 0: "m-0", 2: "m-2", 4: "m-4", 8: "m-8" }, padding: { 0: "p-0", 2: "p-2", 4: "p-4", 8: "p-8" }, @@ -101,9 +102,10 @@ const Render = () => { with tailwind css ```tsx +import * as React from "react" import { styled } from "react-cva"; -const Button = styled("button", true)("button", { +const Button = styled("button", React.forwardRef)("button", { variants: { intent: { primary: [ @@ -147,10 +149,11 @@ const Render = () => { with css modules ```tsx +import * as React from "react" import { styled } from "react-cva"; import style from "./button.module.css"; -const Button = styled("button", true)(style.base, { +const Button = styled("button", React.forwardRef)(style.base, { variants: { intent: { primary: style.primary, @@ -189,13 +192,13 @@ const Render = () => { Builds a `styled` component ```ts -const Component = styled("div",true)("base", options); +const Component = styled("div",React.forwardRef)("base", options); ``` #### Parameters 1. `div`: tag type (`HtmlElement`) -2. `true` should forward prop (`boolean` or `undefined`) +2. `React.forwardRef`:a forward ref function (`function` or `undefined`) 3. `base`: the base class name (`string`, `string[]` or `null`) 4. `options` _(optional)_ - `variants`: your variants schema diff --git a/src/index.ts b/src/index.ts index 33cfc1f..536ecb1 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,6 +12,10 @@ export { VariantProps, ClassProp, VariantsSchema, VariantsConfig, ClassValue } export type IntrinsicElementsKeys = keyof JSX.IntrinsicElements +type ForwardRefFunction = { + (props: any, ref?: any): any +} + type VariantOBJ = | (Variants extends VariantsSchema ? VariantsConfig & ClassProp @@ -20,7 +24,7 @@ type VariantOBJ = export function styled( Tag: T, - forwardRef?: boolean, + forwardRef?: ForwardRefFunction, ) { return function wrapper( base?: ClassValue, @@ -75,6 +79,6 @@ export function styled( return React.createElement(_as, _props) } - return forwardRef ? React.forwardRef(StyledWrapper) : StyledWrapper + return forwardRef ? forwardRef(StyledWrapper) : StyledWrapper } }