awesome-react-components 0,48,33,0,145,26,32,0

Catalog of React Components & Libraries

1 year after CC0-1.0

React Components & Libraries


Contents







UI Components

Table / Data Grid

  • reactable - Fast, flexible, and simple data tables in React.
  • ag-grid - Advanced Data Grid / Data Table supporting Javascript / React / AngularJS / Web Components.
  • griddle-react - Simple Grid Component written in React.
  • react-data-components - React components for sorting, filtering and pagination of data.
  • react-bootstrap-table - It's a react table for bootstrap.
  • react-data-grid - Excel-like grid component built with React, with editors, keyboard navigation, copy & paste, and the like.
  • react-pivot - React-Pivot is a data-grid component with pivot-table-like functionality for data display, filtering, and exploration.
  • autoresponsive-react - Auto Responsive Layout Library For React.
  • reactabular - Spectacular tables for React.
  • fixed-data-table - A React table component designed to allow presenting thousands of rows of data.
  • sematable - Client side sorting, pagination, and text filter for redux/react based apps.

Infinite Scroll

  • react-lazyload - Lazyload your Component, Image or anything matters the performance.
  • react-infinity - A UITableView Inspired list and grid display solution with element culling and smooth animations.
  • react-infinite - A browser-ready efficient scrolling container based on UITableView.
  • react-infinite-grid - A React component which renders a grid of elements.
  • react-list - A versatile infinite scroll React component.
  • react-virtualized - React components for efficiently rendering large lists and tabular data.

Overlay

Display overlay / modal / alert / dialog / lightbox / popup

  • react-dock - Resizable dockable react component.
  • react-overlays - Utilities for creating robust overlay components.
  • boron - A collection of dialog animations with React.js.
  • react-modal2 - Simple modal component for React.
  • react-modal - Accessible modal dialog component for React.
  • react-skylight - A react component for modals and dialogs.
  • rodal - A React modal with animations.
  • react-modal-box - React Modal Box Component.
  • react-aria-modal - A fully accessible and flexible React modal built according WAI-ARIA Authoring Practices.

Notification

Toaster / snackbar — Notify the user with a modeless temporary little popup

Tooltip

Menu

Menus / sidebars

Sticky

Fixed headers / scroll-up headers / sticky elements

Tabs

Loader

Loaders / spinners / progress bars — Let the user know that something is loading

Carousel

Collapse

Chart

Display data in charts / graphs / diagrams

Tree

Display a tree data structure

UI Navigation

Ways to navigate views

Custom Scrollbar

Audio / Video

  • react-player - A react component for playing a variety of URLs, including file paths, YouTube, SoundCloud and Vimeo.
  • react-youtube - React.js powered YouTube player component.
  • react-soundplayer - Create custom SoundCloud players with React.
  • react-video - React component to load video from Vimeo or Youtube across any device.
  • react-music - Make beats with React.
  • react-dailymotion - Dailymotion player component for React.
  • video-react - A web video player built for the HTML5 world using React library.

Map

Time / Date / Age

Display time / date / age

  • react-time - Component for React to render relative and/or formatted dates into <time> HTML5 element.
  • react-timeago - A simple time-ago component for ReactJs.
  • timeago-react - Simple and efficient react component to format date with *** time ago statement. eg: '3 hours ago'.

Photo / Image

Display images / photos

Icons

Display icons / icon set / emojis

Paginator

Display a control element to paginate

Markdown Viewer

Display parsed markdow source

Miscellaneous

Form Components

Let the user enter data

Date / Time picker

Date picker / time picker / datetime picker / date range picker

Input Types

Masked inputs, specialized inputs; email / telephone number / credit card / etc.

Autocomplete

Autosuggest / autocomplete / typeahead

Select

Color Picker

Toggle

Slider

Radio Button

Type Select

Let the user select something (e.g. a tag) while typing

Autosize Input / Textarea

Star Rating

Drag and Drop

Sortable List

Let the user define an order on a list

  • sortablejs - Sortable — is a JavaScript library for reorderable drag-and-drop lists on modern browsers and touch devices. No jQuery. Supports Meteor, AngularJS, React, Polymer, Knockout and any CSS library, e.g. Bootstrap.
  • react-anything-sortable - A ReactJS component that can sort any children with touch support and IE8 compatibility.
  • react-sortable-hoc - A set of higher-order components to turn any list into an animated, touch-friendly, sortable list.
  • react-sortable - A sortable list component built with React.

Rich Text Editor

Markdown Editor

Image Editing

Image manipulation

Form Component Collections

Miscellaneous

UI Layout

Components to layout the app's UI

  • rgx - React grid system based on minimum and maximum widths.
  • react-flexbox - React flexbox implementation.
  • react-masonry-mixin - A React.js mixin for using @desandro's Masonry.
  • react-inline-grid - Predictable flexbox based grid for React.
  • react-layout-components - Layout Components for React based on Flexbox.
  • react-grid-layout - A draggable and resizable grid layout with responsive breakpoints, for React.
  • react-masonry-component - A React.js component for using @desandro's Masonry.
  • react-flexbox-grid - A set of React components implementing flexboxgrid with the power of CSS Modules.
  • react-stonecutter - Animated grid layout component for React.
  • flexbox-react Unopinionated, standard compliant flexbox components. You don't need to learn any propietary syntax. If you know how to use flexbox, you know how to use flexbox-react components.
  • autoresponsive-react - Auto responsive grid layout library.
  • golden-layout - A multi-screen javascript Layout manager.
  • reactwm - A minimal window manager built using React.
  • react-stack-grid - Pinterest like layout components for React.js.
  • react-reflex - Flex layout container component for advanced React web applications.
  • reflexbox - React flexbox layout and grid system.
  • hedron - A no-frills flexbox grid system for React, powered by styled-components.
  • react-resizer - A React component for resizing HTML elements.
  • m-react-splitters - React splitter component, written in TypeScript.

UI Animation

Animate transitions

Parallax

  • react-atv-img - A port of @drewwilson’s atvImg (Apple TV 3D parallax effect) library in React.
  • react-parallax-component - Easiest way to add scroll parallax effect on the component.

UI Frameworks

Responsive

Set of components + responsive layout system

  • elemental - A flexible and beautiful UI framework for React.js.
  • rctui - A collection of components for React.
  • belle - Configurable React Components with great UX.
  • react-uikit-components - React UIkit Components for the UIKit CSS framework.
  • searchkit - React UI components / widgets. The easiest way to build a great search experience with Elasticsearch.
  • rebass - Configurable React Stateless Functional UI Components.
  • react-foundation-apps - Foundation Apps components built with React.
  • grommet - The most advanced UX framework for enterprise applications.
  • @blueprintjs/core - Core styles & components.
  • react-foundation - Foundation as React components.
  • semantic-ui-react - The official Semantic-UI-React integration.
  • pivotal-ui-react - React components based on a custom version of the Bootstrap library.
  • antd - A UI Design Language.

Bootstrap

Material Design

  • react-mdl - React Components for Material Design Lite.
  • react-materialize - Material design for react, powered by materializecss.
  • react-toolbox - A set of React components implementing Google's Material Design specification with the power of CSS Modules.
  • react-material - Material design components written with React.js and React Style.
  • material-ui - React Components that Implement Google's Material Design.
  • react-essence - Essence - The Essential Material Design Framework.

Mobile

  • onsenui - Hybrid Mobile App UI Framework for iOS and Material Design with Angular and React Components.
  • reactionic - React Ionic.
  • touchstonejs - Mobile App Framework powered by React.
  • antd-mobile - A configurable Mobile UI.

Component Collections

Set of components without layout system

Other

  • react-desktop - React UI Components for macOS Sierra and Windows 10.
  • aframe-react - Build virtual reality experiences with A-Frame and React.
  • admin-on-rest - A frontend framework for building admin SPAs on top of REST services, using React and Material Design.

UI Utilites

Reporter

Report computed styles

Visibility Reporter

Report when a component becomes visible/hidden

  • react-waypoint - A React component to execute a function whenever you scroll to an element.
  • react-visibility-sensor - Sensor component for React that notifies you when it goes in or out of the window viewport.

Measurement Reporter

Determine and report measurements of an element

Device Input

Turn user input into actions

Keyboard Events

Scroll Events

Touch Events

Touch Swipe

Mouse Events

  • react-aim - Determine the cursor aim for triggering mouse events.

Meta Tags

Set meta tags, , children of <head></em></p> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/nfl/react-helmet">react-helmet</a> - A document head manager for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/gaearon/react-document-title">react-document-title</a> - Declarative, nested, stateful, isomorphic document.title for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/kodyl/react-document-meta">react-document-meta</a> - HTML meta tags for React-based apps. Works for both client- and server-side rendering, and has a strict but flexible API.</li> </ul> <h3>Portal</h3> <p><em>Render an element at an arbitrary DOM node</em></p> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/tajo/react-portal">react-portal</a> - React component for transportation of modals, lightboxes, loading bars... to document.body.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/fckt/react-layer-stack">react-layer-stack</a> - Simple but ubiquitously powerful and agnostic layering system for React. Useful for any kind of windowing/popover/modals/tooltip application.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/cloudflare/react-gateway">react-gateway</a> - Render React DOM into a new context (aka "Portal").</li> </ul> <h3>Test User Behavior</h3> <p><em>A/B tests, experiments, ...</em></p> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/olahol/react-ab">react-ab</a> - Simple declarative and universal A/B testing component for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/HubSpot/react-experiments">react-experiments</a> - React components for implementing UI experiments.</li> </ul> <h2>Code Design</h2> <p><em>Libraries that help with code design</em></p> <h3>Data Store</h3> <p><em>Data flow / data management / data stores / components state / data flow</em></p> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/reactjs/react-redux">react-redux</a> - Official React bindings for Redux.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/philpl/fluorine">fluorine-lib</a> - Reactive state and side effect management for React using a single stream of actions.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/tshelburne/redux-batched-actions">redux-batched-actions</a> - Redux higher order reducer + action to reduce actions under a single subscriber notification.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/yahoo/react-i13n">react-i13n</a> - A performant, scalable and pluggable approach to instrumenting your React application.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/shastajs/shasta">shasta</a> - Dead simple + opinionated toolkit for building redux/react applications.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/loggur/react-redux-provide">react-redux-provide</a> - Bridges the gap between Redux and the declarative nature of GraphQL/Relay. Share, manipulate, and replicate application state across any number of components.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/tappleby/redux-batched-subscribe">redux-batched-subscribe</a> - Store enhancer for which allows batching subscribe notifications.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/reflux/refluxjs">reflux</a> - A simple library for uni-directional dataflow application architecture with React extensions inspired by Flux.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/BinaryMuse/fluxxor">fluxxor</a> - Flux architecture tools for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/yahoo/fluxible">fluxible</a> - A pluggable container for universal flux applications.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/goatslacker/alt">alt</a> - Isomorphic flux implementation.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/Yomguithereal/baobab-react">baobab-react</a> - React integration for Baobab.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/reactjs/reselect">reselect</a> - Selector library for Redux.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/matthewwithanm/react-controllables">react-controllables</a> - Easily create controllable components.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/acdlite/recompose">recompose</a> - A React utility belt for function components and higher-order components.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/tonyhb/redux-ui">redux-ui</a> - Easy UI state management for react redux.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/reactjs/redux">redux</a> - Predictable state container for JavaScript apps.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/mobxjs/mobx-react">mobx-react</a> - React bindings for MobX. Create fully reactive components.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/cerebral/cerebral">cerebral</a> - A state controller with its own debugger.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/mariusandra/kea">kea</a> - High level architecture for React apps.</li> </ul> <h3>Form Logic</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/mozilla-services/react-jsonschema-form">react-jsonschema-form</a> - A React component for building Web forms from JSONSchema.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/jurassix/react-validation-mixin">react-validation-mixin</a> - Simple validation mixin (HoC) for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/insin/newforms">newforms</a> - INACTIVE] Isomorphic form-handling for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/christianalfoni/formsy-react">formsy-react</a> - A form input builder and validator for React JS.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/erikras/redux-form">redux-form</a> - A Higher Order Component using react-redux to keep form state in a Redux store.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/andrewhathaway/Winterfell">winterfell</a> - Generate complex, validated and extendable JSON-based forms in React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/davidkpiano/react-redux-form">react-redux-form</a> - Create forms easily in React with Redux.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/gcanti/tcomb-form">tcomb-form</a> - Forms library for react.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/AppliedMathematicsANU/plexus-form">plexus-form</a> - A dynamic form component for react using JSON-Schema.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/cerebral/cerebral-module-forms">cerebral-module-forms</a> - A forms handler for Cerebral.</li> </ul> <h3>Router</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/reactjs/react-router">react-router</a> - A complete routing library for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/STRML/react-router-component">react-router-component</a> - Declarative router component for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/acdlite/redux-router">redux-router</a> - Redux bindings for React Router – keep your router state inside your Redux store.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/taion/react-router-scroll">react-router-scroll</a> - React Router scroll management.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/kriasoft/universal-router">universal-router</a> - A simple middleware-style router for isomorphic JavaScript web apps.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/taion/rrtr">rrtr</a> - A complete routing solution for React.js.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/reactjs/react-router-redux">react-router-redux</a> - Ruthlessly simple bindings to keep react-router and redux in sync.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/svenanders/react-breadcrumbs">react-breadcrumbs</a> - Automatic breadcrumbs for React-Router.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/matthewwithanm/monorouter">monorouter</a> - An isomorphic JS router.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/cerebral/cerebral-module-router">cerebral-module-router</a> - An opinionated URL change handler for Cerebral.</li> </ul> <h3>Props from server</h3> <p><em>Component properties asynchronously fetched over the network</em></p> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/andreypopp/react-async">react-async</a> - Asynchronously fetch data for React components.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/Rezonans/redux-async-connect">redux-async-connect</a> - It allows you to request async data, store them in redux state and connect them to your react component.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/ryanflorence/async-props">async-props</a> - Co-located data loading for React Router.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/relay-tools/react-router-relay">react-router-relay</a> - Relay integration for React Router.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/makeomatic/redux-connect">redux-connect</a> - Provides decorator for resolving async props in react-router, extremely useful for handling server-side rendering in React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/ericclemmons/react-resolver">react-resolver</a> - Async rendering & data-fetching for universal React applications.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/heroku/react-refetch">react-refetch</a> - A simple, declarative, and composable way to fetch data for React components.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/markdalgleish/redial">redial</a> - Universal data fetching and route lifecycle management for React etc.</li> </ul> <h3>Communication with server</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/gyzerok/adrenaline">adrenaline</a> - Simple Relay alternative.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/RickWong/react-transmit">react-transmit</a> - Relay-inspired library based on Promises instead of GraphQL.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/apollostack/apollo-client">apollo-client</a> - A simple caching client for any GraphQL server and UI framework.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/apollostack/react-apollo">react-apollo</a> - React data container for the Apollo Client.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/facebook/relay">react-relay</a> - Relay is a JavaScript framework for building data-driven React applications.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/cerebral/cerebral-module-http">cerebral-module-http</a> - HTTP module for Cerebral.</li> </ul> <h3>CSS / Style</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/contra/react-responsive">react-responsive</a> - Media queries in react for responsive design.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/gajus/react-css-modules">react-css-modules</a> - Seamless mapping of class names to CSS modules inside of React components.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/Khan/aphrodite">aphrodite</a> - It's inline styles, but they work!.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/postcss/postcss-js">postcss-js</a> - PostCSS for React Inline Styles, Free Style and other CSS-in-JS.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/RickWong/react-inline-css">react-inline-css</a> - Write CSS inside your React components!.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/JedWatson/classnames">classnames</a> - A simple javascript utility for conditionally joining classNames together.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/d6u/react-container-query">react-container-query</a> - Modular responsive component.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/rofrischmann/react-look">react-look</a> - Advanced & Dynamic Component Styling for React and React Native. Ships with powerful Plugins, Mixins and Developer Tools.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/kodyl/stilr">stilr</a> - Encapsulated styling for your javascript components with all the power of javascript and CSS combined.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/andreypopp/react-css-components">react-css-components</a> - Define React presentational components with CSS.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/rofrischmann/inline-style-prefixer">inline-style-prefixer</a> - Run-time Autoprefixer for Inline Style Objects.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/FormidableLabs/radium">radium</a> - A set of tools to manage inline styles on React elements.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/styled-components/styled-components">styled-components</a> - Visual primitives for the component age.</li> </ul> <h3>HTML Template</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/AlexGilleran/jsx-control-statements">jsx-control-statements</a> - Neater If and For for React JSX.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/wix/react-templates">react-templates</a> - Light weight templates for react.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/substack/hyperx">hyperx</a> - Tagged template string virtual dom builder.</li> </ul> <h3>Isomorphic Apps</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/airbnb/hypernova">hypernova</a> - A service for server-side rendering your JavaScript views.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/redfin/react-server">react-server</a> - React framework with server render for blazing fast page load and seamless transitions between pages in the browser.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/halt-hammerzeit/webpack-isomorphic-tools">webpack-isomorphic-tools</a> - Server-side rendering for your Webpack-built applications (e.g. React).</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/denvned/isomorphic-relay">isomorphic-relay</a> - Adds server side rendering support to React Relay.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/rill-js/rill">rill</a> - Universal web application framework.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/kriasoft/isomorphic-style-loader">isomorphic-style-loader</a> - Isomorphic CSS style loader for Webpack.</li> </ul> <h3>Boilerplate</h3> <p><em>Scaffold / starter kit / Yeoman generator / stack ensemble / seed</em></p> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/facebookincubator/create-react-app">create-react-app</a> - Create React apps with no build configuration.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/SpencerCDixon/redux-cli">redux-cli</a> - An opinionated CLI for building redux/react apps quicker.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/reactuate/reactuate">reactuate</a> - React/Redux stack (not a boilerplate kit).</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/pheuter/essential-react">essential-react</a> - A minimal skeleton for building testable React apps using Babel.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/TrueCar/gluestick">gluestick</a> - GlueStick is a command line interface for quickly developing universal web applications using React and Redux.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/lvarayut/relay-fullstack">relay-fullstack</a> - Relay Starter Kit - Integrated with Relay, GraphQL, Express, ES6/ES7, JSX, Webpack, Babel, Material Design Lite, and PostCSS.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/bdefore/universal-redux">universal-redux</a> - An npm package that lets you jump right into coding React and Redux with universal (isomorphic) rendering. Only manage Express setups or Webpack configurations if you want to.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/insin/nwb">nwb</a> - CLI tool and devDependency for React apps & components and npm modules.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/erikras/react-redux-universal-hot-example">react-redux-universal-hot-example</a> - A starter boilerplate for a universal webapp using express, react, redux, webpack, and react-transform.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/FredericHeem/starhackit">generator-starhackit</a> - StarHackIt: React/Redux + Node full-stack starter kit with authentication and authorization, data backed by SQL.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/RickWong/react-isomorphic-starterkit">react-isomorphic-starterkit</a> - Create an isomorphic React app in less than 5 minutes.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/react-webpack-generators/generator-react-webpack">generator-react-webpack</a> - Yeoman generator for ReactJS and Webpack.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/chentsulin/electron-react-boilerplate">electron-react-boilerplate</a> - Live editing development on desktop app.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/olahol/reactpack">reactpack</a> - Build your react apps with one command and one <code>npm i</code>.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/gaearon/react-hot-boilerplate">react-hot-boilerplate</a> - Minimal live-editing boilerplate for your next ReactJS project.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/alexfedoseev/generator-flux-on-rails">generator-flux-on-rails</a> - Scaffolder of universal Flux / Redux app, backed by Rails API.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/rocjs/roc">roc</a> - Modern Application Development Ecosystem.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/davezuko/react-redux-starter-kit">react-redux-starter-kit</a> - Get started with React, Redux, and React-Router!.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/nicksp/redux-webpack-es6-boilerplate">redux-webpack-es6-boilerplate</a> - A starter project for modern React apps with Redux.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/mxstbr/react-boilerplate">react-boilerplate</a> - Quick packager-agnostic boilerplate for React modules using JSX.</li> </ul> <h3>Miscellaneous</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/lynndylanhurley/redux-auth">redux-auth-patch</a> - Complete token authentication system for react + redux that supports isomorphic rendering.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/treasure-data/redux-search">redux-search</a> - Redux bindings for client-side search.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/matthewwithanm/react-inlinesvg">react-inlinesvg</a> - An SVG loader component for ReactJS.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/gcanti/tcomb-react">tcomb-react</a> - Alternative syntax for PropTypes.</li> </ul> <h2>Utilities</h2> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/Olical/react-faux-dom">react-faux-dom</a> - DOM like structure that renders to React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/martinandert/react-translate-component">react-translate-component</a> - A component for React that utilizes the Counterpart module to provide multi-lingual/localized text content.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/zpao/qrcode.react">qrcode.react</a> - A <QRCode/> component for use with React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/ReactTraining/react-media">react-media</a> - A CSS media query component for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/fernandopasik/react-children-utilities">react-children-utilities</a> - Extended utils for React.Children.</li> </ul> <h3>i18n</h3> <p><em>Internationalization / L10n / localization / translation</em></p> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/yahoo/react-intl">react-intl</a> - Internationalize React apps. This library provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/i18next/react-i18next">react-i18next</a> - Internationalization for react done right. Using the i18next i18n ecosystem.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/CherryProjects/react-translate-maker">react-translate-maker</a> - Universal internationalization (i18n) open source library for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/globalizejs/react-globalize">react-globalize</a> - Bringing the i18n functionality of Globalize, backed by CLDR, to React.</li> </ul> <h3>Framework bindings / integrations</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/firebase/reactfire">reactfire</a> - ReactJS mixin for easy Firebase integration.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/pilwon/react-famous">react-famous</a> - React bridge to Famo.us.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/magalhas/backbone-react-component">backbone-react-component</a> - A bit of nifty glue that automatically plugs your Backbone models and collections into your React components, on the browser and server.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/KtorZ/elm-react-component">elm-react-component</a> - A React component which wraps an Elm module to be used in a React application.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/toxicFork/react-three-renderer">react-three-renderer</a> - Render into a three.js canvas using React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/ProjectSeptemberInc/gl-react">gl-react</a> - OpenGL / WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/react-d3-library/react-d3-library">react-d3-library</a> - Open source library for using D3 in React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/ProjectSeptemberInc/gl-react-dom">gl-react-dom</a> - WebGL bindings for React to implement complex effects over images and content, in the descriptive VDOM paradigm.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/shakacode/react_on_rails">react-on-rails</a> - Integration of React + Webpack + Rails to build Universal (Isomorphic) Apps.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/jhudson8/react-backbone">react-backbone</a> - Backbone-aware mixins for react and a whole lot more.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/syranide/react-swf">react-swf</a> - Shockwave Flash Player component for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/STRML/react-localstorage">react-localstorage</a> - Simple componentized localstorage implementation for Facebook's React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/PixelsCommander/ReactiveElements">reactive-elements</a> - Allows to use React.js component as HTML element (web component).</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/evancz/react-elm-components">react-elm-components</a> - Write React components in Elm.</li> </ul> <h3>Integrations with Third Party Services</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/azmenak/react-stripe-checkout">react-stripe-checkout</a> - Load stripe's checkout.js as a react component. Easiest way to use checkout with React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/hzdg/react-google-analytics">react-google-analytics</a> - Google analytics component.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/appleboy/react-recaptcha">react-recaptcha</a> - A react.js reCAPTCHA for Google.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/rangle/redux-segment">redux-segment</a> - Segment.io analytics integration for redux.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/react-ga/react-ga">react-ga</a> - React Google Analytics Module.</li> </ul> <h2>Performance</h2> <h3>UI</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/JakeSidSmith/react-fastclick">react-fastclick</a> - Fast Touch Events for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/reactjs/react-static-container">react-static-container</a> - Renders static content efficiently by allowing React to short-circuit the reconciliation process.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/Flipboard/react-canvas">react-canvas</a> - High performance <canvas> rendering for React components.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/trueadm/inferno">inferno</a> - An extremely fast, React-like JavaScript library for building modern user interfaces.</li> </ul> <h4>Inspect</h4> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/garbles/why-did-you-update">why-did-you-update</a> - Puts your console on blast when React is making unnecessary updates.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/RamonGebben/react-perf-tool">react-perf-tool</a> - Debug performance of your React application.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/redsunsoft/react-render-visualizer">react-render-visualizer</a> - Render visualizer for ReactJS.</li> </ul> <h4>Lazy Load</h4> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/jasonslyvia/react-lazyload">react-lazyload</a> - Lazyload your Component, Image or anything matters the performance.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/nmn/react-infinity">react-infinity</a> - A UITableView Inspired list and grid display solution with element culling and smooth animations.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/seatgeek/react-infinite">react-infinite</a> - A browser-ready efficient scrolling container based on UITableView.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/ggordan/react-infinite-grid">react-infinite-grid</a> - A React component which renders a grid of elements.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/bvaughn/react-virtualized">react-virtualized</a> - React components for efficiently rendering large lists and tabular data.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/loktar00/react-lazy-load">react-lazy-load</a> - React component that renders children elements when they enter the viewport.</li> </ul> <h3>App Size</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/oliviertassinari/babel-plugin-transform-react-remove-prop-types">babel-plugin-transform-react-remove-prop-types</a> - Remove unnecessary React propTypes from the production build.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/Lucifier129/react-lite">react-lite</a> - An implementation of React that optimizes for small script size.</li> </ul> <h2>Dev Tools</h2> <h3>Test</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/philcockfield/ui-harness">ui-harness</a> - Create, isolate and test modular UI components in React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/conorhastings/redux-test-recorder">redux-test-recorder</a> - A redux middleware to automatically generate tests for reducers through ui interaction.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/Legitcode/tests">legit-tests</a> - Chainable, easy to read, React testing library.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/bruderstein/unexpected-react">unexpected-react</a> - Plugin for [unexpected]( to enable testing the full React virtual DOM, and also the shallow renderer.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/producthunt/chai-enzyme">chai-enzyme</a> - Chai.js assertions and convenience functions for testing React Components with enzyme.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/pzavolinsky/react-unit">react-unit</a> - Lightweight unit test library for ReactJS.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/airbnb/enzyme">enzyme</a> - JavaScript Testing utilities for React.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/sotojuan/redux-ava">redux-ava</a> - Write AVA tests for redux pretty quickly.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/carteb/carte-blanche">carte-blanche</a> - An isolated development space with integrated fuzz testing for your components. See them individually, explore them in different states and quickly and confidently develop them.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/facebook/jest">jest-cli</a> - Painless JavaScript Testing.</li> </ul> <h3>Redux</h3> <ul> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/alexkuz/redux-devtools-inspector">redux-devtools-inspector</a> - Another Redux DevTools Monitor.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/romseguy/redux-devtools-chart-monitor">redux-devtools-chart-monitor</a> - A chart monitor for Redux DevTools.</li> <li><a rel="nofollow noreferrer" target="_blank" href="https://github.com/gaearon/redux-devtools-dock-monitor">redux-devtools-dock-monitor</a> - A resizable and movable dock f</li> </ul> </article> <div class="col-md-4" style="margin-bottom: 50px"> <h3>Related Repositories</h3> <div class="row" style="margin-bottom: 10px"> <div class="col-md-4"> <a href="https://devhub.io/repos/sapegin-react-components"><img src="https://avatars1.githubusercontent.com/u/70067?v=3&s=100" alt="react-components" title="react-components" class="lazyload" width="100"></a> </div> <div class="col-md-8"> <h4><a href="https://devhub.io/repos/sapegin-react-components">react-components</a></h4> <p>List of React components I use and recommend ...</p> </div> </div> <div class="row" style="margin-bottom: 10px"> <div class="col-md-4"> <a href="https://devhub.io/repos/tylermcginnis-awesome-react"><img src="https://avatars.githubusercontent.com/u/2933430?v=3&s=100" alt="awesome-react" title="awesome-react" class="lazyload" width="100"></a> </div> <div class="col-md-8"> <h4><a href="https://devhub.io/repos/tylermcginnis-awesome-react">awesome-react</a></h4> <p>A collection of awesome React libraries, resources and shiny things. ...</p> </div> </div> <div class="row" style="margin-bottom: 10px"> <div class="col-md-4"> <a href="https://devhub.io/repos/gaearon-awesome-react"><img src="https://avatars.githubusercontent.com/u/810438?v=3&s=100" alt="awesome-react" title="awesome-react" class="lazyload" width="100"></a> </div> <div class="col-md-8"> <h4><a href="https://devhub.io/repos/gaearon-awesome-react">awesome-react</a></h4> <p>A collection of awesome React libraries, resources and shiny things. ...</p> </div> </div> <div class="row" style="margin-bottom: 10px"> <div class="col-md-4"> <a href="https://devhub.io/repos/JedWatson-awesome-react"><img src="https://avatars.githubusercontent.com/u/872310?v=3&s=100" alt="awesome-react" title="awesome-react" class="lazyload" width="100"></a> </div> <div class="col-md-8"> <h4><a href="https://devhub.io/repos/JedWatson-awesome-react">awesome-react</a></h4> <p>A collection of awesome React libraries, resources and shiny things. ...</p> </div> </div> <div class="row" style="margin-bottom: 10px"> <div class="col-md-4"> <a href="https://devhub.io/repos/mosch-awesome-react"><img src="https://avatars.githubusercontent.com/u/224866?v=3&s=100" alt="awesome-react" title="awesome-react" class="lazyload" width="100"></a> </div> <div class="col-md-8"> <h4><a href="https://devhub.io/repos/mosch-awesome-react">awesome-react</a></h4> <p>A collection of awesome React libraries, resources and shiny things. ...</p> </div> </div> <br> <h3>Top Contributors</h3> <div> <a href="https://devhub.io/developer/brillout" target="_blank" rel="nofollow"> <img src="https://avatars.githubusercontent.com/u/1005638?v=3&s=60" alt="brillout" title="brillout" class="pull-left" width="60" height="60" style="width:60px;height:60px;" /> </a> <a href="https://devhub.io/developer/devarchy-bot" target="_blank" rel="nofollow"> <img src="https://avatars.githubusercontent.com/u/19780157?v=3&s=60" alt="devarchy-bot" title="devarchy-bot" class="pull-left" width="60" height="60" style="width:60px;height:60px;" /> </a> <a href="https://devhub.io/developer/pdillon" target="_blank" rel="nofollow"> <img src="https://avatars.githubusercontent.com/u/1138977?v=3&s=60" alt="pdillon" title="pdillon" class="pull-left" width="60" height="60" style="width:60px;height:60px;" /> </a> <a href="https://devhub.io/developer/joshwcomeau" target="_blank" rel="nofollow"> <img src="https://avatars.githubusercontent.com/u/6692932?v=3&s=60" alt="joshwcomeau" title="joshwcomeau" class="pull-left" width="60" height="60" style="width:60px;height:60px;" /> </a> <a href="https://devhub.io/developer/skellock" target="_blank" rel="nofollow"> <img src="https://avatars.githubusercontent.com/u/68273?v=3&s=60" alt="skellock" title="skellock" class="pull-left" width="60" height="60" style="width:60px;height:60px;" /> </a> <a href="https://devhub.io/developer/vivaxy" target="_blank" rel="nofollow"> <img src="https://avatars.githubusercontent.com/u/4216856?v=3&s=60" alt="vivaxy" title="vivaxy" class="pull-left" width="60" height="60" style="width:60px;height:60px;" /> </a> </div> <div style="clear: both"></div> <br> </div> </div> </div> <div aria-hidden="true" aria-labelledby="reviewModalLabel" role="dialog" tabindex="-1" id="reviewModal" class="modal fade in"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button data-dismiss="modal" class="close" type="button"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 id="mcqReviewModalLabel" class="modal-title">Would you tell us more about brillout/awesome-react-components?</h4> </div> <form style="padding:10px;" action="https://devhub.io/repos/review" method="POST" role="form" id="review-form" class="form-horizontal bv-form" novalidate="novalidate"> <input type="hidden" name="_token" value="R8xdYemeQmAFmioN0RUvelJOqlX2maqbyJFe4X29"> <input type="hidden" value="2178" name="repos_id"> <div style="padding-top:0;" class="modal-body"> <div class="form-group mcq_input"> <h4>Is the project reliable?</h4> <div class="input-group"> <div class="radio"> <label><input type="radio" value="1" name="reliable">Yes, realiable</label>    <label><input type="radio" value="0" name="reliable">Somewhat realiable</label>    <label><input type="radio" value="-1" name="reliable">Not realiable</label> </div> </div> </div> <div class="form-group mcq_input has-feedback"> <h4>Would you recommend this project?</h4> <div class="input-group"> <div class="radio"> <label><input type="radio" class="definitely_recommend" value="1" name="recommendation">Yes, definitely</label>    <label><input type="radio" class="no_recommend" value="0" name="recommendation">Not sure</label>    <label><input type="radio" class="no_recommend" value="-1" name="recommendation">Nope</label> </div> </div> </div> <div class="form-group mcq_input"> <h4>Is the documentation helpful?</h4> <div class="input-group"> <div class="radio"> <label><input type="radio" value="1" name="documentation">Yes, helpful</label>    <label><input type="radio" value="0" name="documentation">Somewhat helpful</label>    <label><input type="radio" value="-1" name="documentation">Not that helpful</label> </div> </div> </div> <div class="modal-footer"> <button data-dismiss="modal" class="btn btn-default" type="button">Close</button> <button class="btn btn-primary" type="submit" name="button">Submit</button> </div> </div> </form> </div> </div> </div> </section> <footer id="footer"> <div class="container footer-container"> <div class="row"> <div class="col-md-3"> <a href="https://devhub.io/" style="color: #26272d; font-weight: 700; text-transform: uppercase;font-size: 12px;">DevHub.io</a> <p>Recommended high-quality free and open source development tools, resources, reading. <br> Currently tracking <a href="https://devhub.io/list/newest">1,460,641</a> open source projects, <a href="https://devhub.io/developers">443,037</a> developers</p> <ul class="socials"> <li><a href="https://twitter.com/HubDevelop" target="_blank"><i class="fa fa-twitter"></i></a></li> <li><a href="https://www.facebook.com/devhubdotio" target="_blank"><i class="fa fa-facebook"></i></a></li> <li><a href="mailto:devhub.io@gmail.com"><i class="fa fa-envelope-o"></i></a></li> </ul> </div> <div class="col-md-2 col-md-offset-4 col-sm-4 col-xs-6 footer-links"> <ul> <li><p class="title">Website</p></li> <li><a href="#">About</a></li> <li><a href="#">Contact Us</a></li> <li><a href="//status.devhub.io/">Status</a></li> <li><a href="#">API</a></li> <li><a href="https://devhub.io/feed">Feed</a></li> <li><a href="https://github.com/devhub-io">Github</a></li> </ul> </div> <div class="col-md-2 col-sm-4 col-xs-6 footer-links"> <ul> <li><p class="title">GATEGORY</p></li> <li><a href="https://devhub.io/category/lang">Language</a></li> <li><a href="https://devhub.io/category/frontend">Frontend</a></li> <li><a href="https://devhub.io/category/server">Server</a></li> <li><a href="https://devhub.io/category/app">App</a></li> <li><a href="https://devhub.io/category/design">Design</a></li> <li><a href="https://devhub.io/category/read">Reading</a></li> </ul> </div> </div> </div> <div class="container copyright-container"> <div class="row"> <div class="col-md-8 text-left"> <div class="more-info"> <p class="copyright-title">© 2016 - 2019 DevHub.io. All Rights Reserved.</p> <p class="copyright-tips">Disclaimer: This project is not affiliated with the GitHub company in any way. GitHub® and the Octocat® logo are registered trademarks of GitHub, Inc., used with permission—https://github.com/logos</p> </div> </div> <div class="col-md-4"> <div class="row"> <div class="col-md-6 text-right"> <div class="made-by">Power by</div> </div> <div class="col-md-6"> <svg xmlns="http://www.w3.org/2000/svg" width="91" height="18"> <linearGradient id="smooth" x2="0" y2="100%"> <stop offset="0" stop-color="#fff" stop-opacity=".7"></stop> <stop offset=".1" stop-color="#aaa" stop-opacity=".1"></stop> <stop offset=".9" stop-color="#000" stop-opacity=".3"></stop> <stop offset="1" stop-color="#000" stop-opacity=".5"></stop> </linearGradient> <rect rx="4" width="91" height="18" fill="#555555"></rect> <rect rx="4" x="48" width="43" height="18" fill="#4c1"></rect> <rect x="48" width="4" height="18" fill="#4c1"></rect> <rect rx="4" width="91" height="18" fill="url(#smooth)"></rect> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="25" y="13" fill="#010101" fill-opacity=".3">Server</text> <text x="25" y="12">Server</text> <text x="68.5" y="13" fill="#010101" fill-opacity=".3">Nginx</text> <text x="68.5" y="12">Nginx</text> </g> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="106" height="18"> <linearGradient id="smooth" x2="0" y2="100%"> <stop offset="0" stop-color="#fff" stop-opacity=".7"></stop> <stop offset=".1" stop-color="#aaa" stop-opacity=".1"></stop> <stop offset=".9" stop-color="#000" stop-opacity=".3"></stop> <stop offset="1" stop-color="#000" stop-opacity=".5"></stop> </linearGradient> <rect rx="4" width="106" height="18" fill="#555555"></rect> <rect rx="4" x="36" width="70" height="18" fill="#1abc9c"></rect> <rect x="36" width="4" height="18" fill="#1abc9c"></rect> <rect rx="4" width="106" height="18" fill="url(#smooth)"></rect> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="19" y="13" fill="#010101" fill-opacity=".3">CDN</text> <text x="19" y="12">CDN</text> <text x="70" y="13" fill="#010101" fill-opacity=".3">CloudFlare</text> <text x="70" y="12">CloudFlare</text> </g> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="124" height="18"> <linearGradient id="smooth" x2="0" y2="100%"> <stop offset="0" stop-color="#fff" stop-opacity=".7"></stop> <stop offset=".1" stop-color="#aaa" stop-opacity=".1"></stop> <stop offset=".9" stop-color="#000" stop-opacity=".3"></stop> <stop offset="1" stop-color="#000" stop-opacity=".5"></stop> </linearGradient> <rect rx="4" width="124" height="18" fill="#555555"></rect> <rect rx="4" x="72" width="52" height="18" fill="#007ec6"></rect> <rect x="72" width="4" height="18" fill="#007ec6"></rect> <rect rx="4" width="124" height="18" fill="url(#smooth)"></rect> <g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"> <text x="37" y="13" fill="#010101" fill-opacity=".3">Framework</text> <text x="37" y="12">Framework</text> <text x="97" y="13" fill="#010101" fill-opacity=".3">Laravel</text> <text x="97" y="12">Laravel</text> </g> </svg> </div> </div> </div> </div> </div> </footer> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="//devhub.io/build/js/app-5328b290fd.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/peity/3.2.0/jquery.peity.min.js"></script> <script async defer src="https://buttons.github.io/buttons.js"></script> <script> $('#review-form').submit(function () { if ($('#review-form input[name=reliable]:checked').val() === undefined) { return false; } if ($('#review-form input[name=recommendation]:checked').val() === undefined) { return false; } if ($('#review-form input[name=documentation]:checked').val() === undefined) { return false; } return true; }); </script> <script> console.info( ' _____ _ _ _ \n' + ' | __ \\ | | | | | | \n' + ' | | | | _____ _| |__| |_ _| |__ \n' + ' | | | |/ _ \\ \\ / / __ | | | | \'_ \\ \n' + ' | |__| | __/\\ V /| | | | |_| | |_) | \n' + ' |_____/ \\___| \\_/ |_| |_|\\__,_|_.__/ \n' + ' --------------------------------------\n' + ' https://devhub.io '); $("span.line").peity("line"); </script> <script> window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date; ga('create', 'UA-35989028-4', 'auto'); ga('require', 'GTM-T37PMGT'); ga('send', 'pageview'); </script> <script async src='https://www.google-analytics.com/analytics.js'></script> <script> if (typeof ga !== "undefined" && ga !== null) { $(document).ajaxSend(function (event, xhr, settings) { ga('send', 'pageview', settings.url); }); (function (window) { var undefined, link = function (href) { var a = window.document.createElement('a'); a.href = href; return a; }; window.onerror = function (message, file, line, column) { var host = link(file).hostname; ga('send', { 'hitType': 'event', 'eventCategory': (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error', 'eventAction': message, 'eventLabel': (file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : '')).trim(), 'nonInteraction': 1 }); }; }(window)); $(function () { var isDuplicateScrollEvent, scrollTimeStart = new Date, $window = $(window), $document = $(document), scrollPercent; $window.scroll(function () { scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop()) / $document.height()); if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90% isDuplicateScrollEvent = 1; ga('send', 'event', 'scroll', 'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart ) / 1000, 1) + 's' ); } }); }); if (window.performance) { var timeSincePageLoad = Math.round(performance.now()); ga('send', 'timing', 'JS Dependencies', 'load', timeSincePageLoad); } } </script> <script type="text/javascript"> window.doorbellOptions = { appKey: 'akmfqdy1fBgL1corAEydarDdZdwk4P55B94bk8vMbIvnXUTD7mxxYsXKrHeY96fG' }; (function(w, d, t) { var hasLoaded = false; function l() { if (hasLoaded) { return; } hasLoaded = true; window.doorbellOptions.windowLoaded = true; var g = d.createElement(t);g.id = 'doorbellScript';g.type = 'text/javascript';g.async = true;g.src = 'https://embed.doorbell.io/button/5155?t='+(new Date().getTime());(d.getElementsByTagName('head')[0]||d.getElementsByTagName('body')[0]).appendChild(g); } if (w.attachEvent) { w.attachEvent('onload', l); } else if (w.addEventListener) { w.addEventListener('load', l, false); } else { l(); } if (d.readyState == 'complete') { l(); } }(window, document, 'script')); </script> </body> </html>