npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@xh/react-onsenui

v0.1.3

Published

Please note that this package has been forked from https://github.com/OnsenUI/OnsenUI

Downloads

1

Readme

Please note that this package has been forked from https://github.com/OnsenUI/OnsenUI

The motivation for the fork was to include a workaround for deprecated react lifecycle methods: https://github.com/OnsenUI/OnsenUI/issues/2680

This package is not recommended for use outside of https://xh.io projects and client engagements.


npm version

Onsen UI - React Components for Cordova/PhoneGap hybrid apps

Make beautiful high performance hybrid mobile apps using HTML5, CSS and JavaScript. Includes Material Design for Android and flat design for iOS.

Onsen UI is a UI component library for hybrid mobile apps. It provides components for navigation, forms, tabs, Material Design, infinite lists and much more.

It can be used to build hybrid apps with Cordova and PhoneGap but can also run in the browser.

We have built a Tutorial Website where you can see live examples of OnsenUI without installing it. If you find any issues, feel free to report at our OpenSource Repository. Also pull requests are welcome.

To learn how to use these components, please refer to the documentation. You can also check out our kitchensink example to learn how to use this or you can click here for a quick demo.

We also have a highly engaged community that will be available to answer your questions.

The main Onsen UI repo contains the CSS and core JS library for these components. Please star it if you like it!

Using Onsen UI with npm

The easiest way to use these components is by installing them through npm and using a CommonJS module system such as browserify and webpack (the kitchensink example above is using browserify).

You need to install react, react-dom, onsenui and react-onsenui. You probably also need to add Babel with the react preset.

Now you can import the necessary libraries in your code:

var React = require('react');
var ReactDOM = require('react-dom');

require('onsenui'); // This needs to be imported to bootstrap the components.
var Ons = require('react-onsenui');

var MyPage = React.createClass({
  renderToolbar: function() {
    return (
      <Ons.Toolbar>
        <div className='center'>Onsen UI</div>
      </Ons.Toolbar>
    );
  }

  render: function() {
    return (
      <Ons.Page renderToolbar={this.renderToolbar}>
        <p>This is Onsen UI!</p>
      </Ons.Page>
    );
  }
});

ReactDOM.render(<MyPage />, document.getElementById('app'));

Take a look at the kitchensink example for more complex code.

Make beautiful high performance hybrid mobile apps using HTML5, CSS and JavaScript. Includes Material Design for Android and flat design for iOS.

Onsen UI is a UI component library for hybrid mobile apps. It provides components for navigation, forms, tabs, Material Design, infinite lists and much more.

It can be used to build hybrid apps with Cordova and PhoneGap but can also run in the browser.

To learn how to use these components, please refer to the documentation. You can also check out our kitchensink example to learn how to use this or you can click here for a quick demo.

The main Onsen UI repo contains the CSS and core JS library for these components. Please star it if you like it!

Contribution

We always welcome contributions by either opening an issue or doing a pull request.

To test this repo in the current state of master, one needs to first clone this repo recursively (it binds onsenui in a specific version) and run npm install in both the main folder and OnsenUI folder and finally build OnsenUI.

$ git clone --recursive [email protected]:OnsenUI/react-onsenui.git
$ npm install
$ cd OnsenUI; npm install
$ npm install -g gulp # install gulp if not already installed
$ gulp build

After these changes one can run our demo examples with npm run dev and open a brower at port 9000.