@uirouter/react-hybrid

WebJar for @uirouter/react-hybrid

License

License

MIT
Categories

Categories

Github Development Tools Version Controls React User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-ui-router-react-hybrid
Last Version

Last Version

1.0.2
Release Date

Release Date

Type

Type

jar
Description

Description

@uirouter/react-hybrid
WebJar for @uirouter/react-hybrid
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/ui-router/react-hybrid

Download github-com-ui-router-react-hybrid

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-ui-router-react-hybrid/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-ui-router-react-hybrid</artifactId>
    <version>1.0.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-ui-router-react-hybrid/
implementation 'org.webjars.npm:github-com-ui-router-react-hybrid:1.0.2'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-ui-router-react-hybrid/
implementation ("org.webjars.npm:github-com-ui-router-react-hybrid:1.0.2")
'org.webjars.npm:github-com-ui-router-react-hybrid:jar:1.0.2'
<dependency org="org.webjars.npm" name="github-com-ui-router-react-hybrid" rev="1.0.2">
  <artifact name="github-com-ui-router-react-hybrid" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-ui-router-react-hybrid', version='1.0.2')
)
libraryDependencies += "org.webjars.npm" % "github-com-ui-router-react-hybrid" % "1.0.2"
[org.webjars.npm/github-com-ui-router-react-hybrid "1.0.2"]

Dependencies

compile (3)

Group / Artifact Type Version
org.webjars.npm : uirouter__angularjs jar [1.0.26]
org.webjars.npm : uirouter__core jar [6.0.5]
org.webjars.npm : uirouter__react jar [1.0.3]

Project Modules

There are no modules declared in this project.

UI-Router react-hybrid

UI-Router support for Hybrid Angular/React apps

This package enables UI-Router to route to both AngularJS components (and/or templates) and React components. Your app will be hosted by AngularJS while you incrementally migrate to React.

import { ReactAboutComponent } from "./about.component";

/// ...

$stateProvider.state({
  name: 'home', 
  url: '/home',
  component: 'ng1HomeComponent' // AngularJS component or directive name
})

.state({
  name: 'about', 
  url: '/about',
  component: ReactAboutComponent // React component class reference
});

.state({
  name: 'other',
  url: '/other',
  template: '<h1>Other</h1>', // AngularJS template/controller
  controller: function($scope) { /* do stuff */ }
})

When routing to a React component, that component can use the standard React directives (UIView, UISref, UISrefActive) from @uirouter/react.

When routing to an AngularJS component or template, that component uses the standard AngularJS directives (ui-view, ui-sref, ui-sref-active) from @uirouter/angularjs.

Getting started

Remove angular-ui-router (or @uirouter/angularjs) from your package.json and replace it with @uirouter/react-hybrid. Add the react and react-dom dependencies.

dependencies: {
  ...
  "angular": "^1.6.0",
  "react": "^15.4.0",
  "react-dom": "^15.4.0",
   ...
  "@uirouter/react-hybrid": "^0.0.8",
  ...
}

Add AngularJS module for hybrid support

import { UI_ROUTER_REACT_HYBRID } from '@uirouter/react-hybrid';
let ng1module = angular.module("myApp", ['ui.router', UI_ROUTER_REACT_HYBRID]);

Route to AngularJS components/templates

Your existing AngularJS routes work the same as before.

var foo = { 
  name: 'foo',
  url: '/foo',
  component: 'fooComponent'
};
$stateProvider.state(foo);

var bar = { 
  name: 'foo.bar',
  url: '/bar',
  templateUrl: '/bar.html',
  controller: 'BarController'
};
$stateProvider.state(bar);

Route to React components

Use component: in your state declaration.

var leaf = { 
  name: 'foo.bar.leaf',
  url: '/leaf',
  component: MyReactComponentClass
};
$stateProvider.state(leaf);

How it works

React and AngularJS ui-views

An AngularJS <ui-view> can have default content. This default content is rendered when no state is filling the ui-view with a component. For example, a parent state may render a ui-view portal, but want Default Content to display when no child state is active: <ui-view>Default Content</ui-view>.

The @uirouter/react-hybrid project sets the default content to an adapter component, <react-ui-view-adapter>. The react-ui-view-adapter then renders a React <UIView/>.

When a state loads an AngularJS view into the AngularJS <ui-view>, it replaces the react-ui-view-adapter default content.

When a state loads a React Component into the React <UIView/> component, it is nested inside the AngularJS components like so:

<ui-view> // angularjs
  <react-ui-view-adapter> // angularjs
    <UIView> // react
      <RoutedReactComponent/> //react
    </UIView>
  </react-ui-view-adapter>
</ui-view>

Providing "context" to children

In AngularJS, each <ui-view> provides the state context to its children elements, such as ui-sref or ui-view. The state context allows a ui-sref to use relative links, for example. AngularJS provides this context by setting hidden data on its DOM element, using angular.element(el).data('$uiView'). Any nested ui-view or ui-sref fetches the context by asking for angular.element(childel).inheritedData('$uiView').

In React, each UIView provides the state context to its children elements using React context. The nested UIView or UISref fetches the state context using the React context API.

There is some glue provided by @uirouter/react-hybrid which bridges these two context mechanisms. When a React UIView component is rendered, it is wrapped in a UIRouterReactContext component. The component finds the state context by looking first via React props, and second via AngularJS DOM data. It then provides the state context to its children using React props.

The <react-ui-view-adapter> wraps a React UIView component. When the react UIView is filled by a state's react component, the react-ui-view-adapter gets the state context for the newly filled UIView. It then provides that context to AngularJS components using AngularJS DOM data.

org.webjars.npm

UI-Router

State-based routing for single page web applications

Versions

Version
1.0.2