Last active
September 15, 2016 09:06
-
-
Save codeboyim/2b72707d892d8427579a to your computer and use it in GitHub Desktop.
Get ReactJS and Foundation.js Work Together demo: http://jsbin.com/lukako/8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta name="description" content="Get React and Foundation Work Together" /> | |
| <link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/normalize.min.css" rel="stylesheet" type="text/css" /> | |
| <link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/css/foundation.min.css" rel="stylesheet" type="text/css" /> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/vendor/jquery.min.js"></script> | |
| <script src="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.0.3/js/foundation.min.js"></script> | |
| <script src="http://fb.me/react-0.11.0.js"></script> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| </head> | |
| <body> | |
| <div id="tester"> | |
| </div> | |
| <script id="jsbin-javascript"> | |
| /** @jsx React.DOM */ | |
| var FoundationDropDown=React.createClass({displayName: 'FoundationDropDown', | |
| componentDidMount: function(){ | |
| //foundation seems only to work with DOM elements, so kick it off once component is mounted to DOM tree. | |
| $(this.getDOMNode()).foundation(); | |
| }, | |
| render: function(){ | |
| return ( | |
| React.DOM.div(null, | |
| React.DOM.a({href: "#", 'data-dropdown': "drop1"}, "Has Dropdown"), | |
| React.DOM.ul({id: "drop1", className: "f-dropdown", 'data-dropdown-content': true}, | |
| React.DOM.li(null, React.DOM.a({href: "#"}, "This is a link")), | |
| React.DOM.li(null, React.DOM.a({href: "#"}, "This is another")), | |
| React.DOM.li(null, React.DOM.a({href: "#"}, "Yet another")) | |
| ) | |
| ) | |
| ); | |
| } | |
| }); | |
| React.renderComponent(FoundationDropDown(null), document.getElementById('tester')); | |
| </script> | |
| <script id="jsbin-source-javascript" type="text/javascript">/** @jsx React.DOM */ | |
| var FoundationDropDown=React.createClass({ | |
| componentDidMount: function(){ | |
| $(this.getDOMNode()).foundation(); | |
| }, | |
| render: function(){ | |
| return ( | |
| <div> | |
| <a href="#" data-dropdown="drop1">Has Dropdown</a> | |
| <ul id="drop1" className="f-dropdown" data-dropdown-content> | |
| <li><a href="#">This is a link</a></li> | |
| <li><a href="#">This is another</a></li> | |
| <li><a href="#">Yet another</a></li> | |
| </ul> | |
| </div> | |
| ); | |
| } | |
| }); | |
| React.renderComponent(<FoundationDropDown />, document.getElementById('tester'));</script></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** @jsx React.DOM */ | |
| var FoundationDropDown=React.createClass({displayName: 'FoundationDropDown', | |
| componentDidMount: function(){ | |
| $(this.getDOMNode()).foundation(); | |
| }, | |
| render: function(){ | |
| return ( | |
| React.DOM.div(null, | |
| React.DOM.a({href: "#", 'data-dropdown': "drop1"}, "Has Dropdown"), | |
| React.DOM.ul({id: "drop1", className: "f-dropdown", 'data-dropdown-content': true}, | |
| React.DOM.li(null, React.DOM.a({href: "#"}, "This is a link")), | |
| React.DOM.li(null, React.DOM.a({href: "#"}, "This is another")), | |
| React.DOM.li(null, React.DOM.a({href: "#"}, "Yet another")) | |
| ) | |
| ) | |
| ); | |
| } | |
| }); | |
| React.renderComponent(FoundationDropDown(null), document.getElementById('tester')); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Won't this create memory leaks when the component is unmounted?