Render React Components directly to Sketch with React Sketch.app

AirBnB Design: Today, we’re excited to share a tool we built to help bridge the gap between designers and engineers working on design systems at scale. React-sketchapp is an open-source library that allows you to write React components that render to Sketch documents. With it, it’s also possible to bring real data into the designs. […]

React VR – Build VR websites and interactive 360 experiences with React

React VR is a framework for the creation of VR applications that run in your web browser. It pairs modern APIs like WebGL and WebVR with the declarative power of React, producing experiences that can be consumed through a variety of devices. Leveraging web technologies and the existing React ecosystem, React VR aims to simplify […]

Styling React Components with “Glamorous 💄”

Glamorous 💄 is a styled-components 💅 and jsxstyle inspired solution for styling ⚛ React Components. It allows you to do stuff like this: // Create a <Title> react component that renders an <h1> which is // centered, palevioletred and sized at 1.5em const Title = glamorous.h1({ fontSize: '1.5em', textAlign: 'center', color: 'palevioletred', }) // Create […]

Next.js 2.0

Next.js is a very slim yet powerful framework. Place React components in a pages directory and running next, and you’ll get automatic code splitting, routing, hot code reloading and universal (server-side and client-side) rendering. Version 2 of Next.js was released earlier today, with server-side and client-side rendering, dynamic routing, component styling, and link pre-fetching. Next.js […]

Progressive Web Apps with React

Great set of articles by Addy Osmani: In this series of posts I’ll share my experience turning React-based web apps into PWAs. We’ll also cover why shipping just what users need for a route & throwing out all other scripts are good ideas for fast perf. As with all articles by Addy: well-written, accurate, and […]

Efficiently render large lists and tabular data with react-virtualized

Just like Infinity.js, but then for React. The list is windowed (or “virtualized”) meaning that only the visible rows are rendered. Less DOM nodes = better performance 🙂 Also works with rows that have different heights, something not quite common for this kind of thing. react-virtualized →

react-dropzone

Simple HTML5 drag-drop zone to drop files on. import React from ‘react’; import Dropzone from ‘react-dropzone’; export default class DropzoneDemo extends React.Component { onDrop(acceptedFiles, rejectedFiles) { console.log("Accepted files: ", acceptedFiles); console.log("Rejected files: ", rejectedFiles); } render() { return ( <Dropzone accept="image/*" multiple={true} onDrop={this.onDrop}> <div>This dropzone accepts only images. Try dropping some here, or click to […]

react-day-picker

react-day-picker is a flexible date picker component for React. no external dependencies select days, ranges, whatever using CSS modifiers ready for localization, even with moment.js customizable style navigable via keyboard, ARIA support As with every other well-written React component you can easily include this in your own code to – for example – create a […]

Blueprint React UI Toolkit

Blueprint is a collection of React UI components, covering the majority of the common interface elements, patterns and interactions on the web. Using Blueprint ensures that you’ll end up with an elegant, easy-to-use UI, freeing you to focus on building your product—not the atomic pieces that comprise it. The UI components really are well written […]