Skip to content
This repository has been archived by the owner on Nov 15, 2017. It is now read-only.

Latest commit

 

History

History
255 lines (136 loc) · 11.1 KB

components.md

File metadata and controls

255 lines (136 loc) · 11.1 KB

Components

Through the experience of different app developments in React we made some experience with different component and UI solutions. Following is a list of possible tools for you to add to EdgeStack.

CSS Core

Normalize.css

Sanitize.css

Normalize OpenType

Core

ImmutableJS

  • Immutable high capable data structure.
  • Good candidate for usage with Redux but also for internal component state management.

Lodash (Utility Methods)

  • Utility belt for stand

Recompose

Reselect

UI Testing

Jest (Project | Homepage)

  • Basic component testing with Jest snapshots is a breeze.
  • Runtimes are fast enough to make running the test suite feasible even when used multiple times a day.

Nightmare (Project | Introduction)

  • High-level Electron-based (think of modern PhantomJS) UI testing library.

Core UI

Redux Form (Project | Homepage)

  • Effectively the standard for managing form values, implement serialization and state management in Redux applications.
  • Implemented as a higher order component for connecting to more primitive form elements.
  • Integrated tracking for which fields are being touched/modified together with some flexible validation handling.

React Virtualized (Project | Demo)

  • Highly efficient rendering of crazy large lists and tables where instead of rendering all elements which are available the rendering is limited to the actually visible fraction of the component content.
  • All data intensive components should be probably implemented using this library aka data tables, long item lists, auto suggest boxes, country selectors, etc.

React Sortable HOC (Project | Demo)

  • "A set of higher-order components to turn any list into an animated, touch-friendly, sortable list."
  • Works together with React Virtualized.
  • Super smooth animation.
  • Touch ready.

React Sizeme (Project | Demo)

  • "Make your React Components aware of their width, height and position."
  • Effectively offering element queries for styling or even better: alternative rendering paths.
  • There is a more high-level wrapper available for a more query-like approach.

React Overdrive (Project | Homepage)

  • Magic-Move style transitions for React components.

React Motion (Project)

  • Spring style animations for React components.

React DND (Project | Homepage | Demo)

  • A set of React higher-order components to help you build complex drag and drop interfaces while keeping your components decoupled.

React Overlays (Project)

  • Utilities for creating robust overlay components e.g. for modals, dialogs, etc.

React HammerJS (Project)

  • Library for support more complex types of touch events like pinch/zoom based on HammerJS.

React Tapable (Project)

  • Tap Events as common alternative for click events / touch events.

React Waypoint (Project)

  • Scroll detection and interaction during scroll (fade in/out components, etc.)
  • Can be used to build features like lazy loading content, infinite scroll, scrollspies, or docking elements to the viewport on scroll.

React Focustrap (Project | Demo)

  • Locking focus and tab sequence to a specific root component - useful for keyboard support.
  • Wrapper for standalone FocusTrap library.

React Displace (Project)

  • Move components out of the render tree structure into e.g. document body for easier positioning.

NoScroll (Project)

  • Helper library for interactively preventing the scrolling of the document root.

React Draggable (Project | Demo)

  • Component for making elements draggable.

React Resizable (Project)

  • Simple component that is resizable with a handle.

Grid Layout (Project | Demo)

  • Think more of a customizable portal interface engine than a basic (CSS) grid layout implementation.
  • Supports responsive, drag&drop customization, serialization (save+restore), ...

React Move (Project | Demo)

  • Beautifully and deterministically animate anything in react.

UI Component Frameworks

React Toolbox v2 (Project | Homepage | Demo)

Alternative UI framework: Belle

Single UI Components

React Autosuggest (Project | Homepage)

  • Compatible with CSS modules.
  • WAI ARIA compatible (Accessibility)
  • Unfortunately not based on React Virtualized for item rendering.

React Select (Project | Demo)

  • A Select control built with and for React. Supports multiple values, auto complete, lazy loading, etc.
  • Does offer windowing select box rendering using React Virtualized.
  • It comes with a default styling using "normal" CSS, but as it offers customizable classnames it should work well in a CSS modules environment.

DraftJS (Project | Homepage)

  • A JavaScript rich text editor framework, built for React and backed by an immutable model.

ARIA Menu (Project | Demo)

  • Accessible menus by providing keyboard interactions and ARIA attributes aligned with the WAI-ARIA Menu Button Design Pattern.

ARIA Tabpanel (Project)

  • Accessible tabs, by providing keyboard interactions and ARIA attributes described in the WAI-ARIA Tab Panel Design Pattern.

ARIA Modal (Project)

  • Accessible React modal built according WAI-ARIA Authoring Practices

DropZone (Project)

  • Uploading files using Drag&Drop.

Infinite Calendar (Project | Demo)

  • Endless scrollable calendar or better named "date picker" widget with single or multi/range selection. Mobile friendly. Touch ready.
  • Unfortunately just a root CSS Classname configurable without any support for CSS modules.

React Dates (Project | Demo)

  • Different date picker components (single, range).
  • Created and regularly maintained by Airbnb
  • Uses moment.js which is kind of unfortunate as it typically introduces some good amount of overhead.
  • Customization is either being based on using Sass variables or override existing CSS - both is limited in scope/flexibility.

React Leaflet (Project)

  • Embedding of leaflet based maps for React.
  • Well maintained component with regular updates.
  • Typically being combined with tiles from OpenStreetMap.

React Player (Project)

  • Pretty universal video/audio player for React which supports YouTube, Vimeo, Soundcloud and more.

React Vis (Project | Demo)

  • Visualization/Chart Engine based on D3 and made by Uber.

Victory (Project | Homepage)

  • Another chart renderer developed by FormidableLabs and used by e.g. Airbnb.

React Data Grid (Project)

  • Excel like editable data grid implementation with virtual scrolling.

Recharts (Project | Homepage)

  • A composable charting library built on React components and D3.

React Trend (Project)

  • Basic line charting component
  • Small and no dependencies. Based on basic SVG rendering.

React Text Mask (Project)

  • Wrapper for text mask rendering for a React component.
  • Very flexible approach and fully compatible with a basic <input/> element.

React Slick (Project)

  • Slider/Carousel component

React HTML5 Video (Project)

  • A customizeable HoC (Higher Order Component) for HTML5 Video that allows custom and configurable controls with i18n and a11y.

Slider (Project)

  • Slider UI component for React

React Textarea Autosize (Project)

  • Drop-in replacement for the textarea component which automatically resizes textarea as content changes.

React Image Crop (Project)

  • A responsive image cropping tool for React