Skip to content

Instantly share code, notes, and snippets.

@codeboyim
Last active Sep 15, 2016
Embed
What would you like to do?
Get ReactJS and Foundation.js Work Together demo: http://jsbin.com/lukako/8
<!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>
/** @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

michaelBenin commented May 31, 2015

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