Skip to content

Instantly share code, notes, and snippets.

@codeboyim

codeboyim/index.html

Last active September 15, 2016 09:06
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save codeboyim/2b72707d892d8427579a to your computer and use it in GitHub Desktop.
Save codeboyim/2b72707d892d8427579a to your computer and use it in GitHub Desktop.
Download ZIP
Get ReactJS and Foundation.js Work Together demo: http://jsbin.com/lukako/8
Raw
index.html
<!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>
Raw
jsbin.lukako.js
/** @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'));
@michaelBenin
Copy link

Won't this create memory leaks when the component is unmounted?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment