diff --git a/.changeset/tasty-swans-make.md b/.changeset/tasty-swans-make.md
new file mode 100644
index 0000000..a845151
--- /dev/null
+++ b/.changeset/tasty-swans-make.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index ec71ca6..6728a7c 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -30,7 +30,9 @@ jobs:
- name: Require changeset entry
if: github.event_name == 'pull_request'
- run: pnpm changeset status
+ run: |
+ git fetch origin ${{ github.base_ref }} --depth=1
+ pnpm changeset status --since=origin/${{ github.base_ref }}
- name: Check formatting
run: pnpm format:check
diff --git a/README.md b/README.md
index cd145b8..804163f 100644
--- a/README.md
+++ b/README.md
@@ -12,11 +12,11 @@ A single component factory function for polymorphic React components. Built for
import { createPolymorph } from 'react-polymorphic';
const Button = createPolymorph<'button'>(({ as: Tag = 'button', ...rest }) => {
- return
+ return
})
const App = () => {
- return
+ return
}
```
@@ -70,7 +70,7 @@ Polymorphic components let you keep one consistent API while swapping the render
`InferPolymorphElement`, `InferPolymorphProps`, and `InferPolymorphConfig` for advanced typing workflows.
- **TypeScript 7 Ready**
- Compatible with TypeScript 5.4+ and optimized for TypeScript 7.
+ Compatible with TypeScript 5.4+ and optimized for TypeScript 7.
- **Built for React 19+**
Leverages React 19's handling of `ref`, eliminating `forwardRef` and convoluted type gymnastics.
@@ -96,23 +96,23 @@ Most polymorphic components are simple wrappers that combine custom props with i
import { createPolymorph } from 'react-polymorphic';
type Props = {
- variant: 'primary' | 'secondary';
+ variant: 'primary' | 'secondary';
}
const Pane = createPolymorph<'div', Props>((props) => {
- const { as: Tag = 'div', variant, className, ...rest } = props;
- const variantClasses = variant === 'primary' ? 'bg-white' : 'bg-blue-50';
+ const { as: Tag = 'div', variant, className, ...rest } = props;
+ const variantClasses = variant === 'primary' ? 'bg-white' : 'bg-blue-50';
- return
+ return
})
const App = () => {
- return (
- <>
- ...
- ...
- >
- )
+ return (
+ <>
+ ...
+ ...
+ >
+ )
}
```
@@ -127,20 +127,20 @@ import { useRef } from 'react';
import { createPolymorph } from 'react-polymorphic';
const Component = createPolymorph<'div'>((props) => {
- const { as: Tag = 'div', ...rest } = props;
- return
+ const { as: Tag = 'div', ...rest } = props;
+ return
})
const App = () => {
- const ref = useRef(null);
- const aRef = useRef(null);
-
- return (
- <>
-
-
- >
- )
+ const ref = useRef(null);
+ const aRef = useRef(null);
+
+ return (
+ <>
+
+
+ >
+ )
}
```
@@ -155,34 +155,34 @@ import { createPolymorph } from 'react-polymorphic';
import type { PolymorphicConfig, Unset, Inherit } from 'react-polymorphic';
type Props = {
- loading: boolean;
+ loading: boolean;
}
type Config = PolymorphicConfig<'button', {
- 'aria-loading': Unset;
- children: string;
- href: string;
- target?: '_blank';
- type: Inherit;
+ 'aria-loading': Unset;
+ children: string;
+ href: string;
+ target?: '_blank';
+ type: Inherit;
}>;
const Button = createPolymorph<'button', Props, Config>((props) => {
- const { as: Tag = 'button', children, loading, ...rest } = props;
+ const { as: Tag = 'button', children, loading, ...rest } = props;
- return (
-
- {loading ? 'Loading...' : children}
-
- )
+ return (
+
+ {loading ? 'Loading...' : children}
+
+ )
})
const App = () => {
- return (
- <>
-
-
- >
- )
+ return (
+ <>
+
+
+ >
+ )
}
```
@@ -201,12 +201,12 @@ import { createPolymorph } from 'react-polymorphic';
const OtherComponent = createPolymorph<'div'>(...);
const Component = createPolymorph<'div'>((props) => {
- const { as: Tag = 'div', ...rest } = props;
- return
+ const { as: Tag = 'div', ...rest } = props;
+ return
});
const App = () => {
- return
+ return
}
```
@@ -219,9 +219,9 @@ You can extract generics from existing polymorphic components and reuse them whe
```tsx
import { createPolymorph } from 'react-polymorphic';
import type {
- InferPolymorphElement,
- InferPolymorphProps,
- InferPolymorphConfig
+ InferPolymorphElement,
+ InferPolymorphProps,
+ InferPolymorphConfig
} from 'react-polymorphic';
import { TheirButton } from 'some-library';
@@ -237,8 +237,8 @@ type TheirConfig = InferPolymorphConfig;
type Props = { ... }
const OurButton = createPolymorph((props) => {
- const { as: Tag = TheirButton, ...rest } = props;
- return
+ const { as: Tag = TheirButton, ...rest } = props;
+ return
})
```
@@ -248,14 +248,14 @@ If swapping out the base would break core behavior, preserve the base and expose
```tsx
const OurButton = createPolymorph(
- (props) => {
- const { as = 'button', ...rest } = props;
- return
- }
+ (props) => {
+ const { as = 'button', ...rest } = props;
+ return
+ }
)
const App = () => {
- return
+ return
}
```