react-ui-guide

Helpful libraries for building views in react

UI kits

• react-bootstrap https://react-bootstrap.github.io/
• semantic UI https://react.semantic-ui.com/
• material UI https://material-ui.com/
• ant design https://ant.design/

Animations

• react-spring https://www.react-spring.io/
• FLIP technique https://github.com/aholachek/react-flip-toolkit
• react transition group https://reactcommunity.org/react-transition-group/
• react motion https://github.com/chenglou/react-motion
• flubber https://github.com/veltman/flubber

Canvas

• react-canvas https://github.com/Flipboard/react-canvas
• react-konva https://github.com/konvajs/react-konva

WebGL

• react-three https://github.com/Izzimach/react-three
• react-three-fiber https://github.com/react-spring/react-three-fiber
• aframe https://github.com/supermedium/aframe-react

Drag and Drop

• React dnd https://github.com/react-dnd/react-dnd
• React beautiful dnd https://github.com/atlassian/react-beautiful-dnd
• Sortable https://github.com/SortableJS/Sortable
• Dropzone https://github.com/react-dropzone/react-dropzone

Drag and drop grid

• react grid layout https://github.com/STRML/react-grid-layout

Gestures (drag, pinch, scroll, etc)

• react-use-gesture https://github.com/pmndrs/react-use-gesture

Resize

• resizable https://github.com/STRML/react-resizable
• re-resizable https://github.com/bokuweb/re-resizable

Detecting device/view size

• react-measure https://github.com/souporserious/react-measure
• react-sizes https://github.com/renatorib/react-sizes
• react-device-detect https://github.com/duskload/react-device-detect
• react-resize-detector https://github.com/maslianok/react-resize-detector

Color picker

• react-color https://casesandberg.github.io/react-color/
• random color https://github.com/davidmerfield/randomColor

Icons

• octicons https://github.com/primer/octicons/tree/master/lib/octicons_react
• react-icons https://github.com/react-icons/react-icons
• react-icons-kit https://react-icons-kit.now.sh/
• feather https://github.com/feathericons/react-feather

Avatar

• react avater https://www.npmjs.com/package/react-avatar

Mobile mockups

• react-device-mockups https://github.com/kajchang/react-device-mockups

Multistep forms

• albus https://github.com/americanexpress/react-albus
• react-multistep https://github.com/srdjan/react-multistep
• stepzilla https://github.com/newbreedofgeek/react-stepzilla

Maps

• google maps https://github.com/tomchentw/react-google-maps
• mapbox https://github.com/alex3165/react-mapbox-gl
• apple mapkit https://github.com/chrisdrackett/react-mapkit

Payments

• Stripe https://stripe.com/docs/stripe-js/react
• Paypal https://github.com/Luehang/react-paypal-button-v2

Data visualizations

• VisX https://github.com/airbnb/visx#readme
• D3 react https://github.com/react-d3-library/react-d3-library
• React chart https://github.com/reactjs/react-chartjs
• recharts https://github.com/recharts/recharts
• victory https://github.com/FormidableLabs/victory
• nivo https://github.com/plouc/nivo
• react-vis https://github.com/uber/react-vis

Text editors

• Alloy https://github.com/liferay/alloy-editor
• Slate https://github.com/ianstormtaylor/slate

Alerts (also most of the kits at the beginning have alert components)

• alert https://github.com/schiehll/react-alert

Calendars

• calendar https://github.com/react-component/calendar
• infinite calendar https://github.com/clauderic/react-infinite-calendar
• react-calendar https://github.com/wojtekmaj/react-calendar
• big-scheduler https://github.com/StephenChou1017/react-big-scheduler

Detect Scroll

• intersection observer https://github.com/thebuilder/react-intersection-observer
• scroll trigger https://github.com/ryanhefner/react-scroll-trigger

Phone input

• react phone input https://github.com/catamphetamine/react-phone-number-input

Address input

• react places autocomplete https://github.com/hibiken/react-places-autocomplete

Select input (all the ui kits have their own select too)

• react select https://github.com/JedWatson/react-select

Portal

• react-portal https://github.com/tajo/react-portal

Copy to clipboard

• clipboard https://github.com/nihey/react-clipboard.js
• copy-to-clipboard https://github.com/nkbt/react-copy-to-clipboard

Modal

• react modal https://github.com/reactjs/react-modal

Tabs

• https://github.com/reactjs/react-tabs

Autocomplete

• https://github.com/reactjs/react-autocomplete

Drawing

• canvas draw https://github.com/embiem/react-canvas-draw
• react art https://github.com/reactjs/react-art

Clock

• react clock https://github.com/wojtekmaj/react-clock
• react live clock https://github.com/pvoznyuk/react-live-clock
• react countdown https://www.npmjs.com/package/react-countdown

Counting

• react countup https://github.com/glennreyes/react-countup

Photos

• react-photo-gallery https://github.com/neptunian/react-photo-gallery
• react-image-gallery https://github.com/xiaolin/react-image-gallery
• react-responsive-carousel https://github.com/leandrowd/react-responsive-carousel

Embedded videos

• react-player https://github.com/CookPete/react-player
• video-react https://github.com/video-react/video-react

Loading indicator

react-spinners https://github.com/davidhu2000/react-spinners

Progress Bar

nprogress - https://github.com/tanem/react-nprogress

Record audio

• react-mic https://github.com/hackingbeauty/react-mic
• react-audio-recorder https://github.com/danrouse/react-audio-recorder

Performant lists

• react list https://github.com/coderiety/react-list
• react flip move https://github.com/joshwcomeau/react-flip-move

Error handling

• react error boundary (wrapper) https://github.com/bvaughn/react-error-boundary

Social Media share components

• react share https://github.com/nygardk/react-share

Auth

• auth0 https://auth0.com/docs/quickstart/spa/react/01-login
• firebase https://github.com/FirebaseExtended/reactfire
• cognito https://github.com/isotoma/react-cognito

Clientside Routing

• react-router https://reactrouter.com/
• Next.js https://nextjs.org/

Anchor tags

• react scrollable anchor https://github.com/gabergg/react-scrollable-anchor

Click Outside of Element

• Click away listener https://material-ui.com/components/click-away-listener/