# react-onsenui

> Onsen UI - React Components for Hybrid Cordova/PhoneGap Apps with Material Design and iOS UI components

Latest version **1.13.3** (published 2023-06-20) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install react-onsenui
pnpm add react-onsenui
yarn add react-onsenui
bun add react-onsenui
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.13.3 |
| Published | 2023-06-20 |
| First published | 2016-03-27 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | separate (@types/react-onsenui) |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 702.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Onsen UI Team |
| Maintainers | asial-hirose, atakuya, yongsopheaktra, asialgearoid, masahirotanaka, onsenui-user, emccorson, asial-matagawa, knight9999 |
| Keywords | react, react-component, phonegap, cordova, hybrid, app, mobile, ui, onsen, onsenui |

## Links

- npm: https://www.npmjs.com/package/react-onsenui
- Repository: https://github.com/OnsenUI/OnsenUI
- Homepage: https://onsen.io/react/
- Issues: https://github.com/OnsenUI/OnsenUI/issues
- npm.io page: https://npm.io/package/react-onsenui

## Dependencies (1)

- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 1.13.3 (latest) — 2023-06-20
- 1.13.4-beta.0 (beta) — 2026-06-02
- 1.13.2 — 2022-10-13
- 1.13.1 — 2022-10-13
- 1.13.0 — 2022-07-25
- 1.12.0 — 2022-04-15
- 1.11.5 — 2021-09-29
- 1.11.4 — 2021-04-20
- 1.11.3 — 2020-11-01
- 1.11.2 — 2018-12-28
- 1.11.1 — 2018-06-08
- 1.11.0 — 2018-05-17
- 1.10.0 — 2018-01-26
- 1.9.0 — 2017-11-14
- 1.8.0 — 2017-10-23
- … 83 more at https://npm.io/package/react-onsenui/versions

## README

[![npm version](https://badge.fury.io/js/react-onsenui.svg)](https://badge.fury.io/js/react-onsenui)

# 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](https://onsen.io/2/) 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](https://cordova.apache.org/) and [PhoneGap](http://phonegap.com/) but can also run in the browser.

We have built a [Tutorial Website](https://onsen.io/playground/?framework=react&category=Getting%20started&module=Using%20the%20components) where you can see live examples of OnsenUI without installing it. If you find any issues, feel free to report at [our OpenSource Repository](https://github.com/OnsenUI/tutorial). Also pull requests are welcome.

To learn how to use these components, please refer to [the documentation](https://onsen.io/v2/docs/guide/react/index.html). You can also check out our [kitchensink example](https://github.com/OnsenUI/react-onsenui-kitchensink) to learn how to use this or you can [click here](http://onsenui.github.io/react-onsenui-kitchensink/demo.html) for a quick demo.

We also have a highly engaged [community](https://community.onsen.io/) that will be available to answer your questions.

The main [Onsen UI repo](https://github.com/OnsenUI/OnsenUI) 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](https://babeljs.io/) with the `react` preset.

Now you can import the necessary libraries in your code:

```jsx
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](https://onsen.io/2/) 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](https://cordova.apache.org/) and [PhoneGap](http://phonegap.com/) but can also run in the browser.

To learn how to use these components, please refer to [the documentation](https://onsen.io/v2/docs/guide/react/index.html). You can also check out our [kitchensink example](https://github.com/OnsenUI/react-onsenui-kitchensink) to learn how to use this or you can [click here](http://onsenui.github.io/react-onsenui-kitchensink/demo.html) for a quick demo.

The main [Onsen UI repo](https://github.com/OnsenUI/OnsenUI) 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.

```bash
$ git clone --recursive git@github.com: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.

---
_Source: https://npm.io/package/react-onsenui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._