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>JS Bin</title>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://npmcdn.com/skatejs@latest/dist/index-with-deps.js"></script>
   <script src="https://unpkg.com/skatejs-react-integration@latest/dist/index-with-deps.js"></script>
</head>
<body>
  <div>
    <!--   <x-foo foo="bla">test</x-foo> -->
  </div>
</body>
</html>
 
const { define, prop, props, vdom, Component } = skate;
const reactify = skatejsReactIntegration.default;
const Foo = define('x-foo', {
  props: {
    background: { attribute: true }
  },
  updated(elem, prevProps) {
    console.log(props(elem));
    return Component.updated(elem, prevProps)
  },
  render(elem) {
    return (
      vdom.element('div', () => 
        vdom.element('button', {style: `background: ${elem.background}`}, () => 
          vdom.element('slot')
        )  
      )
    );
  }
});
​
const FooReact = reactify(Foo, { React, ReactDOM });
ReactDOM.render(
  React.createElement(FooReact, { background: "red" }, "test"), 
  document.querySelector('div')
)
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers