GitShow/react/react-strict-dom
react

react-strict-dom

React Strict DOM (RSD) standardizes the development of styled React components for web and native.

by react
Star on GitHubForkWebsitenpm

JavaScript

3.5k stars196 forks38 contributorsActive · 1w agoSince 20240.0.54MIT

Meet the team

See all 38 on GitHub →
necolas
necolas280 contributions
ecreeth
ecreeth12 contributions
dependabot[bot]Bot
dependabot[bot]11 contributions
SamChou19815
SamChou1981510 contributions
nmn
nmn9 contributions
martinbooth
martinbooth8 contributions
javascripter
javascripter4 contributions
vincentriemer
vincentriemer4 contributions

Languages

View on GitHub →
JavaScript94.9%
CSS3%
TypeScript1.9%
HTML0.1%
Shell0%

Commit activity

Last 12 weeks · 14 commits

Full graph →

Community health

4 of 6 standards met

Community profile →
62
✓README✓License✓Contributing✓Code of Conduct○Issue Template○PR Template

Recent PRs & issues

Active · Last activity 1w ago
See all on GitHub →
martinbooth
RFC: Improvements to compat.native to support resolving vars correctly and access to the inherited text styleOpenPR

Add a second argument to the react.compat callback which exposes StrictReactNativeMetaProps StrictReactNativeMetaProps has: resolveStyleValue A function that will resolve variables to their concrete values Ancestor/ingerited theme tokens correctly resolve using this function Light/dark tokens resolve correctly Correctly resolves fallbacks, nested vars, non color vars, etc Avoid exposing any private internals inheritedTextStyle Provides access to the text style that would be inherrited by child component Importantly, it provide access to the color which is used on things like elements A more real world example:

martinbooth · 18h ago
durvesh1992
Fix native-driver detection for skew transforms in transitionsOpenPR

Summary in decides whether a CSS transition can run on React Native's native animation driver. For the property it tried to exclude skew transforms with: But is an array of transform objects (e.g. ), not strings, so is always . The skew guard was therefore a dead no-op, and a transition involving / was incorrectly marked as native-driver compatible. The native driver does not support skew, so these transitions must fall back to the JS driver. Fix Detect skew by inspecting each transform object's keys (/) instead of doing a string on the array. Test plan Added a regression test under that animates a transform and asserts is called with (fails before the fix — it was — and passes after). Existing transform/opacity transition tests (which should keep ) still pass. Full jest suite passes (902 tests), reports no errors, and is clean.

durvesh1992 · 1d ago
durvesh1992
Fix text-shadow parsing: negative/decimal lengths and color orderingOpenPR

Summary Fixes a few related correctness bugs in (native), all stemming from how the parser distinguishes a length token from the color token. 1. Negative and decimal lengths only matched non-negative integer lengths (e.g. ). When the last token was a negative offset or a decimal blur radius with no explicit color, it was misclassified as the color — dropping the offset/blur and producing a bogus color value: → vertical offset dropped, set to → blur dropped, set to Fixed by allowing an optional leading minus sign and decimals in , matching the pattern already used by . 2. Color specified before the offsets CSS allows the color to appear either before or after the offset values, but only inspected the last token. A leading color was misparsed: → color dropped, became Fixed by detecting the color as the single non-length token regardless of position. Test plan Added unit tests covering negative offsets, decimal blur radii, and color-before/after ordering (failing before, passing after). Full jest suite passes (901 tests), reports no errors, and is clean.

durvesh1992 · 1d ago

Recent fixes

View closed PRs →
yaminyassin
Type-safe props, events, and refs for react-strict-domMergedPR

Summary This change replaces the suppressions with real types, moves the prop-building mutation out of the hook bodies so it stops fighting the React hook rules, and pins the result down with Flow tests. This is a types-only change. It does not alter runtime behavior, so it can land on its own and be reviewed as such. Motivation is a checked-in promise to come back later. For the event props it had two costs: 1. No checking on handler arguments. typed clean. 2. No editor autocomplete on the event payload, so authors guessed field names or read the source. The props are the public surface of the library. They are the right place to spend the type budget. What changed Event payloads are typed. A new module holds the event shapes the native factories actually construct: , , key, , and image /. Handlers whose runtime shape is defined by the platform (most pointer, mouse, touch, and clipboard events) use a single instead of . The payload types are re-exported from the native and web entry points so consumers can annotate their own handlers. Prop mutation moved out of the hooks. The native factories build their by mutating an object (role defaults, the emulation, the polyfill). Doing that inside a hook body needed a suppression. That logic now lives in plain helpers (, ) that take the and write to it directly, so the suppressions are gone. routes through the type boundary.** now exports from How this improves DX Event handlers are checked. A typo in a payload field or a wrong handler signature is a Flow error at the call site, not a runtime surprise. Editors autocomplete the payload fields, so authors stop reading the source to find out what hands them. The payload types ship from the package entrypoints, so a consumer can write and have it stay in sync with the library. The hook bodies read as straight data flow now. The mutation helpers say what they own in their signatures instead of leaning on per-line suppressions. Type safety in practice A typo in a payload field is a Flow error where it is written, not a runtime : The click payload carries the modifier and position fields it actually has, so reaching past them is caught: Key handlers get a stable field across platforms: Annotating a handler defined outside JSX uses the exported payload types, which stay in sync with the library: A handler whose signature does not match the prop is rejected, so a web payload shape cannot be assumed on a strict element: The opaque handlers still pass the event through, but forces a check before use rather than handing back : Compat Table means the native runtime wires the handler today; means the type exists and the event passes through, but no native module wires it yet. Notes for reviewers A few calls I would like a second opinion on: 1. The exported payload types (, ...) are new public API. If the names or shapes are wrong, now is the time to change them. 2. Should the re-synthesized and pass-through handlers get concrete payload types now, or stay opaque until a native implementation wires each one?

yaminyassin · 56m ago
Christopher2K
Documentation is unaccessibleClosedIssue

Describe the issue Hi! The good ol' regular documentation website is now redirecting to https://opensource.fb.com/. Expected behavior https://facebook.github.io/react-strict-dom should not be redirecting to the meta open source landing page. Steps to reproduce Try to access https://facebook.github.io/react-strict-dom Test case _No response_ Additional comments _No response_

Christopher2K · 2w ago
Structured data for AI agents

Repository: react/react-strict-dom. Description: React Strict DOM (RSD) standardizes the development of styled React components for web and native. Stars: 3522, Forks: 196. Primary language: JavaScript. Languages: JavaScript (94.9%), CSS (3%), TypeScript (1.9%), HTML (0.1%), Shell (0%). License: MIT. Homepage: https://react.github.io/react-strict-dom Latest release: 0.0.54 (9mo ago). Open PRs: 42, open issues: 53. Last activity: 1w ago. Community health: 62%. Top contributors: necolas, ecreeth, dependabot[bot], SamChou19815, nmn, martinbooth, javascripter, vincentriemer, yaminyassin, AlexanderOMara and others.

·@ofershap

Replace github.com with gitshow.dev