Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

react-ui-components

pingyuanChen1901.1.2

A collection of UI components for React

react components, react ui, react ui components, react, react-ui, react-components, react-ui-components

readme

react-ui-components

React Components Library

Install

To install the latest release:

npm install react-ui-components

After npm install, you'll find all the source code in the src/ folder and their compiled results in the /lib folder. And some basic styles of components in scss/ folder.

Usage

Once react-ui-components is installed in your project, you can use like this:

/** MyFirstReactComponent.jsx */

var React = require('react');
var Components = require('react-ui-components');
var SimpleButton = Components.SimpleButton;
var LinkButton = Components.LinkButton;

module.exports = React.createClass({
  render: function(){
    return (
      <div className="btn-demo">
        <SimpleButton 
          customClass="default-btn"
          label="A button element" >
        </SimpleButton>

        <SimpleButton 
          customClass="submit-btn"
          label="A submit element"
          onTap={this._onTap} >
        </SimpleButton>

        <LinkButton 
          customClass="anchor-btn"
          label="A anchor"
          href="http://www.baidu.com/" >
        </LinkButton>
      </div>
    );
  },

  _onTap: function(e){
    alert('Clicked...')
  }
});

/** app.jsx */
var React = require('react');
var injectTapEventPlugin = require('react-tap-event-plugin');
var Buttons = require('./MyFirstReactComponent.jsx');

React.render(<Buttons />, document.getElementById('main'))

Examples

To help you get started, you can find complete example in /examples folder or visit the website

Demo

FAQ

changelog

  • Fail gracefully when Safari security settings prevent access to window.sessionStorage
  • Pushing the currently active path will result in a replace to not create additional browser history entries (see #43)
  • Strip the protocol and domain from <base href> (see #139)

v1.13.0

Oct 28, 2015

  • useBasename transparently handles trailing slashes (see #108)
  • useBasename automatically uses the value of <base href> when no basename option is provided (see #94)

v1.12.6

Oct 25, 2015

  • Add forceRefresh option to createBrowserHistory that forces full page refreshes even when the browser supports pushState (see #95)

v1.12.5

Oct 11, 2015

  • Un-deprecate top-level createLocation method
  • Add ability to use { pathname, search, hash } object anywhere a path can be used
  • Fix useQueries handling of hashes (see #93)

v1.12.4

Oct 9, 2015

  • Fix npm postinstall hook on Windows (see #62)

v1.12.3

Oct 7, 2015

  • Fix listenBefore hooks not being called unless a listen hook was also registered (see #71)
  • Add a warning when we cannot save state in Safari private mode (see #42)

v1.12.2

Oct 6, 2015

v1.12.1

Oct 5, 2015

  • Give location objects a key by default
  • Deprecate history.setState

v1.12.0

Oct 4, 2015

  • Add history.createLocation instance method. This allows history enhancers such as useQueries to modify location objects when creating them directly
  • Deprecate createLocation method on top-level exports

v1.11.1

Sep 26, 2015

  • Fix location.basename when location matches exactly (see #68)
  • Allow transitions to be interrupted by another

v1.11.0

Sep 24, 2015

  • Add useBasename history enhancer
  • Add history.listenBefore
  • Add history.listenBeforeUnload to useBeforeUnload history enhancer
  • Deprecate (un)registerTransitionHook
  • Deprecate (un)registerBeforeUnloadHook
  • Fix installing directly from git repo