Skip to content

Instantly share code, notes, and snippets.

@jeanlescure

jeanlescure/ReactApp.jsx

Created September 30, 2015 10:21
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save jeanlescure/b50d2393036f4dbdc183 to your computer and use it in GitHub Desktop.
Save jeanlescure/b50d2393036f4dbdc183 to your computer and use it in GitHub Desktop.
Download ZIP
Using Semantic UI Modal in a React.js App
Raw
boring.modal.demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Boring Old Modal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<script>
$(function(){
$('.button').click(function(){
$('.ui.modal').modal('show');
});
});
</script>
</head>
<body>
<div class="ui teal button">Show Modal</div>
<div class="ui small modal">
<div class="ui center aligned header">Hello</div>
<div class="content">
<p>World</p>
</div>
</div>
</body>
</html>
Raw
react.modal.demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Modal</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<script type="text/babel" src="ReactApp.jsx"></script>
</head>
<body>
<div id="app">
<!-- template content goes here -->
</div>
</body>
</html>
Raw
ReactApp.jsx
var HelloModal = React.createClass({
getInitialState: function() {
return {
visible: false
};
},
componentDidMount: function() {
var self = this;
$(window).on('modal.visible', function(ev){
self.setState({visible: true});
});
$(window).on('modal.hidden', function(ev){
self.setState(self.getInitialState());
});
},
render: function() {
var modal_classes = (this.state.visible)? 'ui small modal transition visible active' : 'ui small modal transition hidden';
return (
<div className={modal_classes}>
<div className="ui center aligned header">Hello</div>
<div className="content">
<p>World</p>
</div>
</div>
);
}
});
var ModalPage = React.createClass({
getInitialState: function() {
return {
visible: false
};
},
componentDidMount: function() {
var self = this;
$(window).on('modal.visible', function(ev){
self.setState({visible: true});
});
$(window).on('modal.hidden', function(ev){
self.setState(self.getInitialState());
});
},
handleClick: function(ev){
if (ev.target == this.getDOMNode()){
$(window).trigger('modal.hidden');
}
},
render: function() {
var modal_classes = (this.state.visible)? 'ui dimmer modals page transition visible active' : 'ui dimmer modals page transition hidden';
return (
<div className={modal_classes} onClick={this.handleClick}>
<HelloModal />
</div>
);
}
});
var showModal = function(){
$(window).trigger('modal.visible');
}
$(function(){
React.render(
<div>
<div className="ui teal button" onClick={showModal}>Show Modal</div>
<ModalPage />
</div>,
document.getElementById('app')
);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment