Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>ngReactState</title>
​
  <script crossorigin src="//unpkg.com/react@16/umd/react.production.min.js"></script>
  <script crossorigin src="//unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
  <script crossorigin src="//unpkg.com/angular@1.6.7/angular.min.js"></script>
  <script crossorigin src="//unpkg.com/shared-state-hook"></script>
  <!-- <script crossorigin src="//unpkg.com/ng-react-state"></script> -->
<script>
  /*! ng-react-state - 1.3.0 | (c)2019  https://github.com/magnumjs | MIT | https://github.com/magnumjs/ng-react-state#readme */
var ngReactState=function(t){var n={};function e(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,e),o.l=!0,o.exports}return e.m=t,e.c=n,e.d=function(t,n,r){e.o(t,n)||Object.defineProperty(t,n,{enumerable:!0,get:r})},e.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},e.t=function(t,n){if(1&n&&(t=e(t)),8&n)return t;if(4&n&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(e.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&n&&"string"!=typeof t)for(var o in t)e.d(r,o,function(n){return t[n]}.bind(null,o));return r},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},e.p="/",e(e.s=5)}([function(t,n){t.exports=ReactDOM},function(t,n){t.exports=angular},function(t,n){t.exports=React},function(t,n){t.exports=useSharedState},function(t,n){t.exports=useHooksOutside},function(t,n,e){"use strict";e.r(n);var r=e(1),o=e.n(r),u=e(2),c=e(0),i=function(t){return{restrict:"E",replace:!0,link:function(n,e,r){var i=function(t,n){if(o.a.isFunction(t))return t;var e;try{e=n.get(t)}catch(t){}return e||(e=t.split(".").reduce(function(t,n){return t[n]},window)),e}(r.name,t),a=function(){var t=n.$eval(r.props);c.render(u.createElement(i,t),e[0])};n.$watch(r.props,a,!0),a(),n.$on("$destroy",function(){r.onScopeDestroy?n.$eval(r.onScopeDestroy,{unmountComponent:c.unmountComponentAtNode.bind(this,e[0])}):c.unmountComponentAtNode(e[0])})}}},a=e(3),f=e.n(a),l=e(4),p=e.n(l);function s(t,n){return function(t){if(Array.isArray(t))return t}(t)||function(t,n){var e=[],r=!0,o=!1,u=void 0;try{for(var c,i=t[Symbol.iterator]();!(r=(c=i.next()).done)&&(e.push(c.value),!n||e.length!==n);r=!0);}catch(t){o=!0,u=t}finally{try{r||null==i.return||i.return()}finally{if(o)throw u}}return e}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}var d=function(t,n,e){var r;p()(function(){var o=s(f()(t,n,e),2)[1];r=o});return r};function y(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}var v=function(){return{restrict:"E",replace:!0,link:function(t,n,e){var r=e.props?e.props:t[e.name]?e.name:{},o=d(e.name,t[r],function(n){t[r]=function(t){for(var n=1;n<arguments.length;n++){var e=null!=arguments[n]?arguments[n]:{},r=Object.keys(e);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(e).filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.forEach(function(n){y(t,n,e[n])})}return t}({},t[r],n),t.$$phase||t.$apply()});t[e.updater]?t[e.updater]=o:t.$watch(r,function(t,n){t!==n&&o(t)},!0),t.$on("$destroy",function(){e.onScopeDestroy?t.$eval(e.onScopeDestroy,{unmountComponent:c.unmountComponentAtNode.bind(this,n[0])}):c.unmountComponentAtNode(n[0])})}}};e.d(n,"reactState",function(){return v}),e.d(n,"createReactProvider",function(){return d}),e.d(n,"reactComponent",function(){return i});var m=o.a.module("react-state",[]).directive("reactComponent",["$injector",i]).directive("reactState",v).factory("reactState",function(){return d});n.default=m}]);
  </script>
  </head>
  
<body ng-app="app">
  <h1>
  <a target="_blank" href="https://github.com/magnumjs/ng-react-state">
    ngReactState
  </a>
  </h1>
  
  <p>
    Angular 1 Directives and factory with React Hooks 
    to share and auto re-render state across React Components
    without props passing or parent hierarchies
  </p>
  
  <hr/>
  <div ng-controller="helloController">
    
     User's Token: {{user.token}}
    
    <react-state name="user"></react-state>
    <react-component name="App"></react-component>
    <react-component name="App2"></react-component>
    
  </div>
  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers