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
}
}