Bookmarks (2256)

plyr-react — An accessible and customizable player component for both video and audio as well as YouTube and Vimeo-hosted content.

Compound Components In React — Compound components are the building blocks of design systems. If you have the development of the latter in your future, the tutorial will get you up and running on this advanced React pattern.

Running React Native Everywhere — The first part of an in-depth, multi-part guide on running a common React Native code base not only on the iOS and Android mobile platforms—as one might expect—but also on macOS, Windows and as a web app, as a browser extension, as well as within Electron.

React 18 Watch: New startTransition API Keeps Apps Responsive During Large Screen Updates — Up until the imminent React 18, all updates were considered ‘urgent’. startTransition enables the prioritization of updates so truly urgent ones get handled right away and everything else gets dealt with at a lower priority.

Relay v12 — The latest release of Facebook’s mature GraphQL client is out. In addition to run-time optimization, the new release includes improvements to React integration as well as logger, type-safety, and documentation updates. However, it also includes some breaking changes: in particular Abstract Type Refinement has changed and there are also changes to live query behaviour.

Graceful Error Handling Using Error Boundaries in React — A runtime error in React can result in a blank screen and a bewildered user. Error Boundaries enable the error to be caught and a more meaningful, fallback UI displayed instead.

Migrating from Create React App — A guide on how to transition from an existing non-ejected Create React App project to Next.js – an option that will open up a lot more possibilities such as API routes, incremental static regeneration, and better data fetching options.

Implementing Material Design’s Floating Labels — "It's a fun little exercise and it's not actually too difficult," Max reassures us. Or you can just straight to the CodeSandbox.

react-date-range 1.4.0: Component for Selecting Dates and Date Ranges — An intuitive component for picking date ranges as shown in their demo.

mdb-react-ui-kit — It's the popular Material Design design system, but for Bootstrap 5 and React 17. It comes in both a free and fee-based Pro version. There's plenty of demos here and a decent tutorial to check out too.

CSS Variables for React Devs — An updated piece, and a solid look at how to use CSS variables (custom properties) in your next project.

Twitter's Web App — As Powered by React Native for Web — Twitter must harbour the ambition for a common code base shared between their web and mobile apps. The big hint is their use of React Native for the Web for their current web offering and here's some of what that entails in terms of messy HTML and uglified CSS.

Looking for a Data Grid? Hop On a Tour of the KendoReact Grid — Breeze through your React data grid research as KendoReact PM Carl Bergenhem walks you through everything you need to know, from how the grid handles basic operations to custom editing and PDF & Excel export demos. Enjoy the video.

Testing React Hooks and Components: The Missing Piece — Jest and React Testing Library are both popular testing systems but the author asserts they lack the ability to test visually, which can more closely resemble real-world use. He uses Storybook to provide this “missing piece” of the testing puzzle.

Data Table Component 7.0: A Flexible React Data Table Library — Packed with features but easy to set up and lots of documentation available. Be sure to check out the ‘kitchen sink’ example. GitHub repo.

How to Build an Android News App — All the functionality required of a basic news app using React Native in combination with NativeBase, Expo, React Navigation and News API.

State Management in Next.js Apps — Managing state in a Next.js application can get tricky very quickly. This looks at some patterns to help avoid complexity in common scenarios and avoid “provider hell.”

Preparing Your React Native App for iOS 15 and Android 12 — Advice for readying your app for the new mobile OS versions releasing late this year and avoiding any regressions when the releases become generally available.

react-web-editor: A WYSIWYG Editor System for React Apps — A library for creating WYSIWYG editors complete with resizable and draggable elements, plus included rich text editing support.

use-cannon — What makes an animation look 'real'? One big thing can be physics, such as provided by these hooks for React Three Fiber. The ping pong demo illustrates the principle well.

Reactant — Ever wish that React was more like Angular? Controversial.. but this React framework was inspired by such an idea.

A Guide to React Context and the useContext() Hook — While React Context can seemingly simplify component access to global data regardless of where those components are in the tree, useContext() can add its own brand of complexity, meaning it’s not suitable for every situation and.. "Sometimes drilling the props through 2-3 levels in the hierarchy isn’t a big problem."