refactor: replace as prop with render prop in Text and Headline#740
refactor: replace as prop with render prop in Text and Headline#740rohanchkrabrty wants to merge 2 commits intomainfrom
as prop with render prop in Text and Headline#740Conversation
Migrate Text and Headline components from the brittle `as` polymorphic prop pattern to Base UI's `render` prop + `useRender` hook, matching the pattern already used by the Flex component. This eliminates manual type unions, removes a `@ts-expect-error` suppression, and enables rendering as any element via JSX or render functions. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 59 minutes and 3 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (12)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The render prop accepts ReactElement values, not strings. Update
playground select options to use JSX element strings (e.g. '<h2 />')
so getPropsString generates correct `render={<h2 />}` syntax.
Also document the render prop in Headline's API Reference section.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 participant
Summary
aspolymorphic prop with Base UI'srenderprop +useRenderhook in the Text and Headline components, matching the existing pattern used by theFlexcomponent.TextSpanProps,TextDivProps, etc.) and the@ts-expect-errorsuppression, usinguseRender.ComponentProps<'span'>/useRender.ComponentProps<'h2'>instead.as='a'on Text) to userender={<a />}.renderprop.Test plan
npx tsc --noEmit)<span>for Text,<h2>for Headline)<Text render={<h1 />}>)<Text render={(props) => <section {...props} />}>)🤖 Generated with Claude Code