Skip to main content

react-overlays

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: Special thanks to react-bootstrap

Contact Me - mtscout6+react-bootstrap@gmail.com

Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.

Comments

Popular posts from this blog

react-bootstrap

Bootstrap 3 components built with React https://react-bootstrap.github.io/ Docs See the documentation with live editable examples. Related modules react-router-bootstrap – Integration with React Router React Bootstrap Extended - A version of React Bootstrap where each component has extra props that map to bootstrap's utility classes. For example, pullRight adds the class pull-right to a component. Local setup Install the dependencies with npm install Run tests npm test Run tests in watch mode npm run tdd Run the docs site in development mode with npm run docs. This will watch for file changes as you work. Simply refresh the page to see the updates. Build with npm run build Note: Special thanks to react-bootstrap Contact Me - mtscout6+react-bootstrap@gmail.com Disclaimer: The blog is created to share react components information to geek, curious ReactJS Developers.

React CSS components

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...

Declarative router component for React.

http://strml.viewdocs.io/react-router-component Project Overview Usage is as simple as just returning a configured router component from your component's render() method: <Locations> <Location path="/" handler={MainPage} /> <Location path="/users/:username" handler={UserPage} /> <Location path="/search/*" handler={SearchPage} /> <Location path={/\/product\/([0-9]*)/} handler={ProductPage} /> </Locations> Having routes defined as a part of your component hierarchy allows to dynamically reconfigure routing based on your application state. For example you can return a different set of allowed locations for anonymous and signed-in users. React router component can dispatch based on location.pathname or location.hash if browser doesn't support History API (see hash routing ). Props can be passed through the router by setting them directly on each , or to all possible routes via a childPro...