Mauerwerk – A React Spring Driven Masonry

⚒ A react-spring driven masonry-like grid with enter/exit and shared element transitions   npm install mauerwerk Demo: https://codesandbox.io/embed/0582jolnl Simplified Demo: https://codesandbox.io/embed/z6ly40071p How to use import { Grid } from ‘mauerwerk’ <Grid // Arbitrary data, should contain keys, possibly heights, etc. data={this.state.data} // Key accessor, instructs grid on how to fetch individual keys from the data set keys={d => […]

Tachyons v4.10.0 – Css Toolkit

Built for designing. Create fast loading, highly readable, and 100% responsive interfaces with as little CSS as possible. Download v4.10.0 Getting Started Copy the line of code below and paste it in the head of the HTML file(s) you want to include tachyons in. <link rel=”stylesheet” href=”https://unpkg.com/tachyons@4.10.0/css/tachyons.min.css”/> or install via npm npm install –save-dev tachyons@4.10.0 or […]

Rehooks/Awesome React Hooks

Awesome-react-hooks  Awesome React Hooks Resources Documentation React Hooks Docs Discussions React Hooks RFC Tutorials “Making Sense of React Hooks” by Dan Abramov “From React.Component to hooks” by Octave Raimbault Videos 🎬 ReactConf 2018: React Today and Tomorrow by Sophie Alpert and Dan Abramov Official announcement and first demo. 🎬 ReactConf 2018: 90% Cleaner React by Ryan Florence 🎬 React […]

Glider.js – A Fast, Lightweight Carousel Alternative

A fast, lightweight, dependency free, native scrolling carousel alternative! https://nickpiscitelli.github.io/Glid…   Glider.js A fast, light-weight, dependency free, responsive, accessible, extendable, native scrolling list with paging controls, methods and events. (< 2.5kb gzipped!) Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/ Quick Start Include glider.min.css: <link href=”glider.min.css” rel=”stylesheet” type=”text/css”> Include Glider.js: <script src=”glider.min.js”></script> Example HTML: <div> <div> […]

React Apollo Hooks

Use Apollo Client as React hooks Use Apollo Client as React hooks. Warning: Hooks are currently a React RFC and not ready for production. Use at minimum react@16.7.0-alpha.0 to use this package. Installation npm install react-apollo-hooks Example https://codesandbox.io/s/8819w85jn9 is a port of Pupstagram sample app to react-apollo-hooks. API ApolloProvider Similar to ApolloProvider from react-apollo. Both packages can be used together, if you want to try […]

Danger JS

⚠️ Stop saying “you forgot to …” in code review http://danger.systems/js/   Formalize your Pull Request etiquette. What is Danger JS? • Vision • Helping Out • Plugin Development What is Danger JS? Danger runs after your CI, automating your team’s conventions surrounding code review. This provides another logical step in your process, through which Danger can help lint your rote tasks in […]

Vant – Lightweight Mobile UI Components Built on Vue

Lightweight Mobile UI Components built on Vue https://youzan.github.io/vant Features 50+ Reusable components 80%+ Unit test coverage Extensive documentation and demos Support babel-plugin-import Support TypeScript Support SSR Install NPM npm i vant -S YARN yarn add vant CDN <!– import style –> <!– import script –> <script src=”https://unpkg.com/vue/dist/vue.min.js”></script> <script src=”https://unpkg.com/vant/lib/vant.min.js”></script> Quickstart 1. Use babel-plugin-import (Recommended) # Install babel-plugin-import npm i […]

React Draft Wysiwyg

A Wysiwyg editor built using ReactJS and DraftJS libraries. Demo Page. Features Configurable toolbar with option to add/remove controls. Option to change the order of the controls in the toolbar. Option to add custom controls to the toolbar. Option to change styles and icons in the toolbar. Option to show toolbar only when editor is focused. […]

Merge Images

Easily compose images together without messing around with canvas     Canvas can be kind of a pain to work with sometimes, especially if you just need a canvas context to do something relatively simple like merge some images together. merge-images abstracts away all the repetitive tasks into one simple function call. Images can be overlaid on top […]