React Components

Utilities for creating robust overlay components demos and docs at: https://react-bootstrap.github.io/react-overlays/ Install npm install --save react-overlays All of these utilities have been abstracted out of react-bootstrap in order to provide better access to the generic implementations of these commonly needed components. The included components are building blocks for creating more polished components. Everything is bring-your-own-styles, css or otherwise. If you are looking for more complete overlays, modals, or tooltips--something you can use right out of the box--check out react-bootstrap, which is (or soon will be) built on using these components. note: we are still in the process of abstracting out these components so the API's will probably change until we are sure that all of the bootstrap components can cleanly be implemented on top of them. Pre 1.0.0 breaking changes happen on the minor bump while feature and patches accompany a patch bump. Note: Spec

A react component to easily use number inputs. This one acts like those in After Effects or similar software. Click and drag to slide the value. Double-click to enter manually a new value. Use your Up/Down keys to increment/decrement the value. Hold shift key to step by bigger value. Hold control/command key to step by smaller value. Example var React = require('react'); var NumberEditor = require('react-number-editor'); React.render( <NumberEditor min={0} max={1} step={0.01} decimals={2} onValueChange={onValueChange} />, document.body ); Usage Here are the list of properties available for the component: min (number) the minimum value. Default no minimum max (number) the maximum value. Default no maximum step (number) the step to increment when sliding and with up/down arrows. Default 1. stepModifier (number) how much to multiply/divide with the modifier keys (shift and control/command). Default is 10. decimals (nu

React Async provides a way for React components to subscribe for observable values. Installation React Async is packaged on npm: $ npm install react-async Basic usage React Async provides a component decorator @Async which given a set of observable specifications wraps a regular React component and returns a new one which subscribes to observables and re-renders the component when new data arrives. The basic example looks like: import React from 'react'; import Async from 'react-async'; import Rx from 'rx'; function defineXHRObservable(url) { return { id: url, start() { return Rx.fromPromise(fetch(url)) } } } function MyComponentObservables(props) { return { user: defineXHRObservable(`/api/user?user${props.userID}`) } } @Async(MyComponentObservables) class MyComponent extends React.Component { render() { let {user} = this.props ... } } The @Async decorator in

Motivation Define React presentational components with CSS (or even SASS or Less if you like). The implementation is based on CSS modules. In fact React CSS Components is just a thin API on top of CSS modules. NOTE: The current implementation is based on Webpack but everything is ready to be ported onto other build systems (generic API is here just not yet documented). Raise an issue or better submit a PR if you have some ideas. Installation & Usage Install from npm: npm install react-css-components style-loader css-loader Configure in webpack.config.js: module.exports = { ... module: { loaders: [ { test: /\.react.css$/, loader: 'react-css-components', } ] } ... } Now you can author React components in Styles.react.css: Label { color: red; } Label:hover { color: white; } And consume them like regular React components: import {Label} from './styles.react.css' <Lab

Drop-in replacement for the textarea component which automatically resizes textarea as content changes. A native React version of the popular jQuery Autosize This module supports IE9 and above. import Textarea from 'react-textarea-autosize'; // If you use CommonJS syntax: // // var Textarea = require('react-textarea-autosize').default; React.renderComponent( <div> <Textarea></Textarea> </div>, document.getElementById('element')); Install npm install react-textarea-autosize Demo https://andreypopp.github.io/react-textarea-autosize/ Note: Special thanks to Andrey Popp Contact Me - 8mayday@gmail.com Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.

Live Demo Getting Started Install via npm npm i react-crouton --save-dev Usage var Crouton = require('react-crouton') var data = { id: Date.now(), type: 'error', message: 'Hello React-Crouton', autoMiss: true || false, onDismiss: listener, buttons: [{ name: 'close', listener: function() { } }], hidden: false, timeout: 2000 } <Crouton id={data.id} type={data.type} message={data.message} onDismiss={data.onDismiss} buttons={data.buttons} hidden={data.hidden} timeout={data.timeout} autoMiss={data.autoMiss}> // You can render child component here // <ChildComponent /> </Crouton> Options id required, every message need an unique id. type: number message required, the message what you want show. type: string || array example: message: 'Hello React-Crouton' message: ['Hello',