React datasheet

Simple and highly customizable excel-like spreadsheet

npm install react-datasheet --save

A GraphQL client for React using modern context and hooks APIs that is lightweight (< 2.5 KB size limited) but powerful; the first Relay and Apollo alternative with server side rendering. https://graphql-react.now.sh

link to the repo

markdown editor

🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. http://ui.toast.com/tui-editor

React component for the Intersection API

React Intersection Observer is a React component, acting as a wrapper for the IntersectionObserver API. It is fully declarative and takes care of all the imperative parts for you.

React Intersection Observer is good at:

reusing instances: comparing the passed options
performance: chooses smartly when to re-render and when to re-observe
being unopinionated: how to handle visibility changes is left entirely up to the developer
being intuitive: looks like the Native API

link to the repo

Grommet

streamline the way you develop apps

build responsive and accessible mobile-first projects for the web with an easy to use component library

styled breakpoints

Simple and powerful tool for creating breakpoints in styled components and emotion. 💅

Immutable state store for react apps with suspense integration.
link to the repo

JavaScript library for reorderable drag-and-drop lists
link to the site

awesome standalones

A curated list of awesome framework-agnostic standalone web components

Curated colors in context.

Not sure what colors to use in your designs or where to use them? Happy Colors is a color palette inspiration site that acts as a real world example as to how the colors could be used in your design projects.

What is it?

React Animated Navigator is an extension for react-router, which provides animated transitions between routes, with friendly components and hooks for navigation. It is using react-transition-group to maintain the transitions.

Features

Supports using focal element (aka SharedElement), which is a persistent element significant to the hierarchy that can be tweened. Like animated containers, focal elements enhance continuity by seamlessly transforming their appearance.

Provides many built-in transitions (Fly, Slide, Flip, ... more effects will be added).

Easy to use, and extend with your custom transitions.

link to the site

Design resources that will help you get things done faster
link to the site

Tufte CSS provides tools to style web articles using the ideas demonstrated by Edward Tufte’s books and handouts. Tufte’s style is known for its simplicity, extensive use of sidenotes, tight integration of graphics with text, and carefully chosen typography.

Tufte CSS was created by Dave Liepmann and is now an Edward Tufte project. The original idea was cribbed from Tufte-LaTeX and R Markdown’s Tufte Handout format. We give hearty thanks to all the people who have contributed to those projects.

use-simple-state

A simple, dependency-free state manager for React using hooks.

30 seconds of code

Short code snippets for all your development needs

Mailmeteor is the easiest and privacy-first Gmail mail merge add-on. Run campaigns so that each of your recipients gets a personalized email.

link to the site

Collection of awesome print inspired layout designs on the web

Desktop javascript scratchpad app link to the site

link to the repo
react-interactive-paycard

Inspired from a vue project vue-interactive-paycard, I decided to recreate the same on React as a part time fun project. I did some minor changes on the animations and optimizations on the code.

A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with reactjs and also fully responsive

link to the book

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

link to the repo

BackstopJS
Visual regression testing for web apps.

Supports screen rendering with Chrome-headless. Add your own interactions with Puppeteer and ChromyJS scripting.

BackstopJS was created by Garris Shipon with contributions from these amazing engineers.

Opensourced under the The MIT License.

get it on github

a list of javascript interview questions and thier solutions link to the repo

vanillawc

Vanilla Web Components. A place for framework-free, transpiler-free, scaffolding-free web components.

link to the resource

Rallax.js is a vanilla JS plugin that implements a dynamic parallax scrolling effect, without dependencies. See documentation.

link to the site

Next-Generation full text search library for Browser and Node.js

Web's fastest and most memory-flexible full-text search library with zero dependencies.

link to the repo

Takes CSV or tab-delimited data from Excel and converts it into several web-friendly formats, include JSON and XML.

link to the repo

[Pure Javascript OCR for more than 100 Languages] 📖🎉🖥 (http://tesseract.projectnaptha.com/)

A datetime range picker for your React app.

by Wojciech Maj

link to the site

link to the site

A list of 24 cool tips and tricks on functional programming

link to the post

A11Y Nutrition Cards is an attempt to digest and simplify the accessibility expectations when it comes to component authoring. Based on the WAI ARIA Authoring Practices Guide.

link to the site

link to the site

Powered by Gatsby

Starting from v2, Docz is entirely built using GatsbyJS. It's optimised for a lightning fast development experience and speedy build times. This also allows you to leverage GatsbyJS's huge ecosystem of plugins and tools.
Zero config

No need to worry about complex configuration settings to build and run your documentation. With Docz you can create customizable sites with a single command.
Easy to customize

Using component shadowing you can create your own theme or customize the provided theme to make your documentation website stand out.
Based on MDX

MDX is Markdown + JSX, it brings the world of components to Markdown. MDX makes it possible to import and use your components in Markdown-style files. Docz fully leverages this, and provides many built-in components that augment and speed up your documentation workflow.
Fully pluggable

Plugins provide a great way to add functionality to your application without changing your code. With Docz, you can hook into the dataflow and build steps of your application using GatsbyJS and Docz plugins.
TypeScript support

Docz provides native TypeScript support for TSX components and can generate documentation from your prop types and comments in your code. All exported Docz components are built using TypeScript. Check out the API section for more information.

Choices.js

A vanilla, lightweight (~19kb gzipped 🎉), configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.

list of useful tips and tricks with react

Hooks for building fast and extendable tables and datagrids for React

Features

Lightweight (5kb - 12kb+ depending on features used and tree-shaking)
Headless (100% customizable, Bring-your-own-UI)
Auto out of the box, fully controllable API
Sorting (Multi and Stable)
Filters
Pivoting & Aggregation
Row Selection
Row Expansion
Column Ordering
Animatable
Virtualizable
Resizable
Server-side/controlled data/state
Extensible via hook-based plugin system

link to the repo

link to the site
list of 24 cool articles on css tips and tricks

A dead simple library to screenshot test React components

All you need is to install react-screenshot-test and configure Jest:

// jest.screenshot.config.js

module.exports = {
  testEnvironment: "node",
  globalSetup: "react-screenshot-test/global-setup",
  globalTeardown: "react-screenshot-test/global-teardown",
  testMatch: ["**/?(*.)+(screenshot).[jt]s?(x)"],
  transform: {
    "^.+\\.[t|j]sx?$": "babel-jest", // or ts-jest
    "^.+\\.css$": "react-screenshot-test/css-transform",
    "^.+\\.scss$": "react-screenshot-test/sass-transform",
    "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
      "react-screenshot-test/asset-transform"
  },
  transformIgnorePatterns: ["node_modules/.+\\.js"]
};

You can then generate screenshots with jest -c jest.screenshot.config.js -u, just like you would with Jest snapshots.

link to the repo

A neat way to unsubscribe from observables when the component destroyed

link to the repo

React query
Hooks for fetching, caching and updating asynchronous data in React

This editor is based on Prosemirror, fully extendable and renderless. You can easily add custom nodes as Vue components.
link to the site

link to the repo
Vegetarian friendly state for React

Features

Zero configuration
No boilerplate
React hooks based API
Computed properties - i.e. derived data
Data fetching / side effects
Persist state to session/local storage
Testing helpers
Extensive TypeScript support
Global, shared, or component level stores
React Native supported
Redux Dev Tools supported
Hot Reloading supported

link to the tool

The task library that just works build by microsoft
link to the site

link to the icon set

⚠️ Currently under development

A JSX-based page builder for creating beautiful websites without writing code. Blocks comes with built-in components that are carefully designed and implemented with Theme UI.

The editor reads and writes production-ready React code, making it an innovative tool for teams.

It's open source and MIT licensed.

link to the site

Reactime 3.0 beta

STATE DEBUGGER FOR REACT

The only time-travel debugging tool you need to develop your React application by tracking, visualizing, and reverting state changes.

free illustration kit

(The fastest JSON Schema Validator. Supports draft-04/06/07) [https://ajv.js.org]