This Week In React #85: FloatingUI, Remix, Redwood, Rails, Relay, Storybook, Gesture Handler, Flipper, Sandpack, Open-Props...

New positioning library for floating elements (tooltip, dropdowns …), similar to Tether or PopperJS, but lighter, low level, with a modular system, decoupled from the DOM. It also offers higher level APIs like React components, and experimental React-Native support! The lib is provided by a PopperJS maintainer, who felt it was better to create a brand new project.

A comparison of Remix to Rails, approuved by Michael Jackson. Evokes the productivity primitives offered by Remix (resource routes, loader, filesystem convention, co-location …), the context of “Jamstack fatigue” in which we find ourselves, the advent of the serverless Edge deployment and the return of SSR.

Redwood has just released its 1st release candidate, with some highlights such as integration with Chakra, Fastify or RedwoodRecord. Redwood is supported by Tom Preston-Werner, creator of GitHub and Jekyll, who has used Rails a lot. Redwood focuses first on product velocity, before pure technical performance. It has strong opinions, like the use of Chakra, Prisma, GraphQL, TypeScript, Storybook …

The v2 of this gestures lib has just been released, with a redesigned APIs, but backwards compatible. Integrates well with Reanimated 2 worklets.

Highlights:

There is already Storybook for React-Native, but it’s different separate project from the web Storybook, with its own - fewer - addons. Danny is one of the maintainers, and offers us to use a new official plugin for React-Native-Web, converting React-Native components to equivalent web elements automatically.

The trade-offs are different: you can reuse the entire ecosystem of existing web-only addons, benefit from visual regression testing with Chromatic, or distribute more easily the storybook to stakeholders. But the React-Native components might render a bit differently or simply fail to render.

The 2 approaches seem complementary. If a component does not work, it remains possible to deactivate it with a .web.js stub.

CodeSandbox open-sourced this tool to create new live interactive code experiences where you can edit some code and see a live preview. It includes a bundler that can run inside your browser (can work with npm dependencies) and a full-featured code editor. React components make it easier to integrate. The new beta React doc is using it. It looks like a modern alternative to React-Live?