200 ReactJs Free Components

An easy way to get started at CodePen with React 0.13 and ES6. .....
Free

Playground for 'react-native-web'. Use the https://rnplay.org native simulator to work with 'react-native'. .....
Free

.....
Free

A simple react component to handle uploading previewing an image before uploading it. Blog post: http://www.hartzis.me/react-image-upload/ .....
Free

3D carousel made with React. .....
Free

Reactive Scroller compatible with react-motion https://github.com/du5rte/react-skroll .....
Free

Just playing around with React and a little touch UI for a sci-fi door locking panel. As you do. .....
Free

Pen for Learn How to Create Quick and Simple React Flipping Card tutorial on http://blog.alexdevero.com/ .....
Free

React - example of rendering elements from an array. .....
Free

Calculator is an exercise in React, playing with custom data stores and PostCSS. Click the RECALL button for a brief abstraction on a Flux store. The code for the store starts on line 177. .....
Free

A calculator built with React .....
Free

React implementation of a sortable drag and drop list organised into columns. .....
Free

Template for React 15 + ES6 .....
Free

Using react-motion to animate an SVG .....
Free

Using React v0.14 with ES6 Class syntax. Thanks to (http://webcloud.se/sortable-list-component-react-js/) .....
Free

https://facebook.github.io/react/tips/initial-ajax.html .....
Free

I am just playing around, trying to make a simple to use react bar chart component, and mostly customizable via CSS .....
Free

A diagram showing the sequence of methods invoked in the lifecycle of a React component .....
Free

Inbox built upon React and ES6. .....
Free

Component-wrapper for collapse animation with react-motion for elements with variable (and dynamic) height .....
Free

Day 3 of the ReactJS DailyUI project. I'm going to be making 100 different React pens over the next 100 days, in order to get better. .....
Free

This pen loads the react-vis module (https://github.com/uber/react-vis) to easy, expressive charts w/ React .....
Free

This is part of a collection containing basic exercises in React, that I devised for myself to practice my React skills as I learn. Here I practice adding a dynamically generated item to the list on button click .....
Free

Hi guys. In this pen you can see how to toggle class in React. Cheers! .....
Free

React Basics using only React Element .....
Free

A proof-of-concept for rendering a React component tree based on a JSON object that declares arbitrarily nested components for each page in a serialized data format. .....
Free

A React based interactive animation of BB-8 from Star Wars. Originally inspired by Mike Dixon: http://codepen.io/mdixondesigns/pen/PPEJwz .....
Free

A port of @juliangarnier's anime.js to React, declaratively define your animations and use the anime.js api with react components! .....
Free

.....
Free

.....
Free

A simple example of using react in GoldenLayout .....
Free

Re-implementation of jQuery.slideToggle JS animation. You can reverse the direction before the movement completes. .....
Free

Simple react image carousel using react-swipeable. https://github.com/dogfessional/react-swipeable .....
Free

Just made a quick little blog, my first day writing React so I'm sure there are tons of things I could do better. Trying out what I learned watching Wes Bos' React for Beginners course. Feel free to comment with ways to improve! .....
Free

Pen for How to learn react and create stunning image gallery tutorial on http://blog.alexdevero.com/ .....
Free

Demo of React-Quill, a React wrapper around the Quill rich text editor. See also: https://github.com/zenoamaro/react-quill .....
Free

Just an example dropdown menu in React .....
Free

A SVG Togger built with React and React Motion .....
Free

Built using React, ES2015, Jade, Sass, JavaScript, jQuery, and Pokémon API. .....
Free

Messing around with React in CodePen .....
Free

.....
Free

Trying to understand React (ES6) component lifecycles? Here are some help. You can find more info on Facebooks own documentation, for instance here: https://facebook.github.io/react/docs/reusable-components.html#es6-classes .....
Free

.....
Free

Insanely simple React form tutorial for web designers published on www.blog.alexdevero.com .....
Free

Game of Life in React and Redux An implementation of John Conway's Game of Life in React and Redux. .....
Free

React cheatsheet written with React .....
Free

Making a search bar with react Example 3 from: http://tutorialzine.com/2014/07/5-practical-examples-for-learning-facebooks-react-framework/ .....
Free

Baseline Pen for building React components in CodePen .....
Free

.....
Free

.....
Free

This pen not only demonstrated the skeleton Screens UI effect in React. More importantly, the demo is for reusable react component. .....
Free

Calendar widget built with React and Flexbox .....
Free

This started because someone asked me if there was ever a case in a layout for preserveAspectRatio="none" in an SVG. I started with the background, thinking about how the layout could change with this responsive SVG. It's built i.....
Free

An image upload component, using react-dropzone. .....
Free

My take on Dan Abramov's Redux tutorial on Egghead.io .....
Free

React logo made with pure CSS in a single DIV element. .....
Free

.....
Free

Been doing @wesbos React and ES6 courses and Dan Abramov Redux course over on https://egghead.io/, so I figuired what the world needed was another todo app... .....
Free

Facbook 's Thinking in React example converted into an editable table . .....
Free

Pen for Learn How to Create Quick and Simple React Flipping Card tutorial on http://blog.alexdevero.com/ .....
Free

For this challenge I wanted to have a go at creating something along the lines of the useless box/cat piggy bank in the form of a checkbox toggle ???? .....
Free

A responsive React image zoom component for touch and mouse. Designed for shopping site product detail. Supports in-place and side-by-side image enlargement. Features tinted guide lens, interaction hint, hover intent, long-press .....
Free

Example of a progress bar written with React. .....
Free

Todo example modified to ES6 from https://facebook.github.io/react/ .....
Free

Challenge Daily CSS Images Day: 34 Theme: React JS .....
Free

A binary clock built with react .....
Free

Accordion component made with React .....
Free

Day 2 of learnig React! .....
Free

This is a simple circular progress bar implemented with React. It has the following features: Display of the progress bar is specified by only two values: the enclosing square size in pixels and the stroke width of the circle in.....
Free

This is an experiment made with React and the Web Audio API. Unleash your creativity and compose your own melody! .....
Free

A basic request to a weather service with promise status handling using the Fetch API and React. Uses a polyfill for IE compatibility. .....
Free

Some friends and I are building an RPG using React. CodePen has been incredibly helpful in the development process. This Pen is a demo of our game. .....
Free

Printable PDF of React Cheat Sheet coming soon. .....
Free

Date picker in React, you can select a range of dates. .....
Free

A simple table component in React. .....
Free

simple example of a tab navigation built with React. Followed this post .....
Free

Inspired by Angular Material's md-chips directive. .....
Free

A simple example of how to use SVG Sprites with React .....
Free

.....
Free

Example .....
Free

to-do app made by using react. .....
Free

This game is built with React, SVG, and GreenSock. It's about a hipster elephant who wants to get tacos but his friends keep trying to change plans and text him. Margaritas are extra points. This game is based on real life events.....
Free

Playing around with react-slick to see if the footer can change between different panels. .....
Free

Simple standalone React tab control. Some initial concepts based on React-bootstrap Tabs. .....
Free

.....
Free

A short and sweet introduction to common patterns to make visualizations with d3 and React. Can visualization help me decide where to move? .....
Free

Based on the React Router tutorial, augmented with ReactCSSTransitionGroup to animate route transitions. Only works on Chrome for now. .....
Free

Just a quick example of a React hook in an independent, reusable component. .....
Free

This is a little animation experiment with react-motion. A lot of this is just forked and messed with from the react-motion chat heads demo. https://github.com/chenglou/react-motion/tree/master/demos/demo1-chat-heads. It's intere.....
Free

Practice with React and SVG to create a rather enticing visual, for a simple clock displaying the current time. .....
Free

.....
Free

Project built while going through the Lynda.com course. This course gives a good introduction to React, and I found the instructor to be knowledgeable and easy to understand. .....
Free

Rendering a C3.js chart with React - changing the type of chart dynamically. .....
Free

A simple circular slider made with React and SVG. Use it in your projects! .....
Free

Glowing orb clock made with React .....
Free

A simple star rating widget. .....
Free

Messing with react :) .....
Free

A homage to the fallout 4 release! A pip boy made with React and LESS. Fork it! https://github.com/CosX/React-pip-boy .....
Free

.....
Free

This is the way I prefer to set tabs using React. The most tabs systems I found on the web do not let you to compose properly each part of them (e.g. put a button in a tab), or are too complicated. .....
Free

Simple Demo of the React Masonry Layout library we've built. You can check it out on Github. .....
Free

.....
Free

NavItem and MenuItem using react-router-bootstrap .....
Free

It's a demonstration of loading remote react components dynamically. Note the restriction that remote component must be a plain react component, thus it can't require modules other than "react". .....
Free

.....
Free

Build SVG paths easily using this GUI. The main goal was to provide a quick way to get a path, without having to open tools like Adobe Illustrator. Made in 1000 lines using React v0.14. .....
Free

Simple React Shopping Cart without using Redux .....
Free

Setup controls with React for HTML5 audio element to save playback time to localStorage and restart play from last location after refresh. .....
Free

Create a modal using React and Redux .....
Free

Color picker written in React .....
Free

Day 1 of the ReactJS DailyUI project. I'm going to be making 100 different React pens over the next 100 days, in order to get better. .....
Free

Just playing around trying to make a really simple react component to generate pie and doughnut charts. Useful if I don't want to load a whole library just to generate one pie chart in my project. .....
Free

A simple button that reacts like a jellycake .....
Free

.....
Free

.....
Free

Simple page navigation using React Router v2.8.1 .....
Free

.....
Free

.....
Free

React + React DOM + Babel .....
Free

Multiuser chat built with React and Firebase. Note that this is on the Firebase free plan, so if more than 50 users are on it things may go south. .....
Free

This is a simple example of how to use react + canvid https://github.com/gka/canvid .....
Free

Just a simple donut chart for react. .....
Free

.....
Free

SVG masks are now supported in the latest version of React (they may have been before but I just couldn't seem to get them to work). .....
Free

Static data example for using Chartist.js within React. Info - http://www.clintioo.com/2016/01/03/react-charts-with-chartist-js/ .....
Free

3D animated chart: React, WebGL, CSS3D, mouse interactivity (try hovering over the bars!) Libraries and sources: .....
Free

.....
Free

.....
Free

Using React to manage the state for a Bootstrap-styled Dropdown .....
Free

.....
Free

A cute chatbot (´?`)? in a responsive layout, using React + Google Dialogflow. .....
Free

An image slider built with reactJS .....
Free

React Measure Demo https://github.com/souporserious/react-measure .....
Free

.....
Free

.....
Free

A slot machine is a good use-case for React due to all the state we need to track. I use a CSS sprite and randomly move its background image. .....
Free

Made a Pokedex in React! .....
Free

.....
Free

React logo reacting .....
Free

.....
Free

.....
Free

React tabs .....
Free

Example of using JSX in the JS panel on CodePen .....
Free

A simple infinite scrolling with React (using fake data for demo) .....
Free

This is re-written Watch: Capturing Time in React example by ES6 .....
Free

Just a shell for making a React pen. .....
Free

Demo from my 'Build your first React Redux Application' article -http://codepen.io/allanpope/post/build-react-redux-component .....
Free

.....
Free

???? Watch the elements pop up! ???? Drag the Sun / Moon around the Earth ???? Switch off / on the light! ???? This pen is a bit overengineered, ok: I'm a nerd .....
Free

A slider built with React, using some basic ES2015 features through Babel, animated with CSS3 transforms and transitions. .....
Free

HTML5 canvas clock, created as a React component. .....
Free

Practicing React ! Please do let me know if I can do something in a better way. .....
Free

This is a bulletin board web app built using the React.js framework, JSX, the Babel compiler and the bacon ipsum API. You can add, edit, delete and move all the notes on the board. .....
Free

.....
Free

this is a react wrapper for @zadvorsky's https://codepen.io/zadvorsky/details/PNXbGo these are picture of my friend X-Ray, an australian cattle dog mixed with border collie .....
Free

Hooks are a new feature proposal that lets you use state and other React features without writing a class. They’re currently available in React v16.7.0-alpha, meaning you can get a feel for what they are going to be like today......
Free

React component that renders Input with debounced onChange .....
Free

Here's a live example of the Shiitake React line clamp. .....
Free

A hero image built with Typed.js .....
Free

.....
Free

The CSSTransitionGroup in the React Addons works fine for simple things, but since React components don’t have much knowledge of their children, more complex nested components can be re-rendering while the transitions are happe.....
Free

React components for HTML5 form validation https://github.com/tkrotoff/react-form-with-constraints .....
Free

The dungeon challenge from the React challenges of FreeCodeCamp .....
Free

This is a simple image carousel built with React. I was asked to build this in a live coding interview but ended up following a more complicated approach at first. After the interview , I got this :) .....
Free

Svg Animation in React using GSAP .....
Free

.....
Free

These simple CSS blocks are alive. Each block reacts to its neighbors by transforming border-radius and color. Endless block formations, endless reactions between them. .....
Free

A simple template for fooling around with react-js. .....
Free

.....
Free

React cardio 003 .....
Free

Hooks are a new feature proposal that lets you use state and other React features without writing a class. They’re currently available in React v16.7.0-alpha, meaning you can get a feel for what they are going to be like today......
Free

React - sort list by various parameters in asc/desc order .....
Free

This pen shows how to bring together React components and a Redux store to make a minimal To-Do List app! .....
Free

React TodoApp example from react documentation http://facebook.github.io/react/ .....
Free

.....
Free

.....
Free

This React component shows a way to build dropdowns without adding a listener to the window. .....
Free

Tweet box with range slider for controlling amount of characters which are allowed. React v15.3.1 & ES6 .....
Free

A simple tabs control implemented by react .....
Free

Basic demo for https://github.com/souporserious/react-media-player .....
Free

Started looking at this pen http://codepen.io/trevorlang/pen/EaKYjN and wanted to mimic the actions but building it in React.js .....
Free

A Pipeline visualization inspired by https://dribbble.com/shots/1815831-Funnel. Built using React and SVG. Non-responsive as of now. Please refer to the docs on the component's constructor for the signature of props to be passed .....
Free

Demo from video: https://css-tricks.com/video-screencasts/147-starting-react-powered-comment-form/ .....
Free

Sandbox for testing react-stripe-elements NPM package .....
Free

React Component using SVG filters feTurbulence and feDisplacementMap to generate a suiggly effect at all children elements. .....
Free

.....
Free

.....
Free

Had a go at throwing together a simple lipsum generator with React .....
Free

This is a working example of a React Form component with custom HTML5 validation errors. It wraps a usual HTML form element with the additional functionality of displaying input HTML5 validation error messages in custom container.....
Free

This is a minimal example of a Redux store for a To-Do App written in React. To learn how to use react-redux to connect these two parts together, you'll want to check out "Functional Programming with React and Redux: The Part Whe.....
Free

A quick react modal solution. .....
Free

.....
Free

A demo for using React's render props technique. Accompanying article: React's render props technique in 3 minutes .....
Free

Simple ES6 React component that displays a label after 2s. Mouse over the Thumbs-up to see. .....
Free

Animations in React .....
Free

This pen shows an implementation of Draft.js framework built by facebook. It's a powerful Rich Text Editor with ton of potential! .....
Free

An implementation of the float label form interaction using React. Look ma, no JSX! .....
Free

TypeScript with TSX React Bootstrap LESS react-bootstrap RxJS for reactivity .....
Free

Exploration of the React-Bootstrap (The most popular front-end framework, rebuilt for React) .....
Free

A small example showing off the power of the component exposed by React-Motion. .....
Free