How to use react-onsenui - 10 common examples

To help you get started, we’ve selected a few react-onsenui examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github OnsenUI / OnsenUI / bindings / react / examples / components / ReduxNavigator / reducer.js View on Github external
import {RouterUtil} from 'react-onsenui';

import MainPage from './main-page';
import SecondaryPage from './secondary-page';

const initialState = RouterUtil.init([{
	component: MainPage,
	props: {
		key: 'main'
	}
}]);

const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);
github OnsenUI / OnsenUI / bindings / react / examples / components / RouterNavigator.js View on Github external
constructor(props) {
    super(props);

    const routeConfig = RouterUtil.init([{
        component: MainPage,
        props: {
          key: 'main',
          pushPage: (...args) => this.pushPage(...args)
        }
    }]);

    this.state = {routeConfig};

  }
github OnsenUI / OnsenUI / bindings / react / examples / components / RouterNavigator.js View on Github external
popPage(options = {}) {
    let routeConfig = this.state.routeConfig;

    routeConfig = RouterUtil.pop({
      routeConfig,
      options: {
        ...options,
        animationOptions: {duration: 0.4}
      }
    });

    this.setState({routeConfig});
  }
github OnsenUI / OnsenUI / bindings / react / examples / components / ReduxNavigator / reducer.js View on Github external
const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);
		case 'POP_PAGE':
      routeConfig = state;
      return RouterUtil.pop({routeConfig});
		case 'POST_POP':
      return RouterUtil.postPop(state);
		default:
			return state;
	}
};
github OnsenUI / OnsenUI / bindings / react / examples / components / ReduxNavigator / reducer.js View on Github external
const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);
		case 'POP_PAGE':
      routeConfig = state;
      return RouterUtil.pop({routeConfig});
		case 'POST_POP':
      return RouterUtil.postPop(state);
		default:
			return state;
	}
};
github OnsenUI / OnsenUI / bindings / react / examples / components / RouterNavigator.js View on Github external
onPostPop() {
    const routeConfig = RouterUtil.postPop(this.state.routeConfig);
    this.setState({routeConfig});
  }
github OnsenUI / OnsenUI / bindings / react / examples / components / RouterNavigator.js View on Github external
onPostPush() {
    const routeConfig = RouterUtil.postPush(this.state.routeConfig);
    this.setState({routeConfig});
  }
github OnsenUI / OnsenUI / bindings / react / examples / components / ReduxNavigator / reducer.js View on Github external
const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);
		case 'POP_PAGE':
      routeConfig = state;
      return RouterUtil.pop({routeConfig});
		case 'POST_POP':
      return RouterUtil.postPop(state);
		default:
			return state;
	}
};
github OnsenUI / OnsenUI / bindings / react / examples / components / RouterNavigator.js View on Github external
pushPage(page, key) {
    const route = {
      component: page,
      props: {
        key: key,
        popPage: () => this.popPage(),
        pushPage: (...args) => this.pushPage(...args)
      }
    };

    let routeConfig = this.state.routeConfig;

    routeConfig = RouterUtil.push({
      routeConfig,
      route
    });

    this.setState({routeConfig});
  }
github OnsenUI / OnsenUI / bindings / react / examples / components / ReduxNavigator / reducer.js View on Github external
const reducer = (state = initialState, action) => {
  let routeConfig;

	switch(action.type) {
		case 'PUSH_PAGE':
      const {route} = action;
      routeConfig = state;
      return RouterUtil.push({routeConfig, route});
		case 'POST_PUSH':
      return RouterUtil.postPush(state);
		case 'POP_PAGE':
      routeConfig = state;
      return RouterUtil.pop({routeConfig});
		case 'POST_POP':
      return RouterUtil.postPop(state);
		default:
			return state;
	}
};

react-onsenui

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

Apache-2.0
Latest version published 1 year ago

Package Health Score

69 / 100
Full package analysis