Skip to content

Instantly share code, notes, and snippets.

@ryanflorence
Last active October 26, 2020 18:31
Show Gist options
  • Star 59 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save ryanflorence/7cdaea0af8e334413502 to your computer and use it in GitHub Desktop.
Save ryanflorence/7cdaea0af8e334413502 to your computer and use it in GitHub Desktop.
var Dialog = React.createClass({
render: function() {
// 1) render nothing, this way the DOM diff will never try to do
// anything to it again, and we get a node to mess with
return React.DOM.div();
},
componentDidMount: function() {
// 2) do DOM lib stuff
this.node = this.getDOMNode();
this.dialog = $(this.node).dialog({
autoOpen: false,
// pass in lib options from props
title: this.props.title,
close: this.props.onClose
}).data('ui-dialog');
// 3) call method to reconnect React's rendering
this.renderDialogContent(this.props);
},
componentWillReceiveProps: function(newProps) {
// 4) render reconnected tree when props change
this.renderDialogContent(newProps);
},
renderDialogContent: function(props) {
// 5) make a new rendering tree, we've now hidden the DOM
// manipulation that jQuery UI dialog did from React and
// continue the React render tree, some people call this
// a "portal"
React.renderComponent(React.DOM.div({}, props.children), this.node);
// 6) Call methods on the DOM lib via prop changes
if (props.open)
this.dialog.open();
else
this.dialog.close();
},
componentWillUnmount: function() {
// clean up the mess
this.dialog.destroy();
},
getDefaultProps: function() {
return {
title: '',
onClose: function(){}
}
}
});
@DanWebProject
Copy link

hello nice to meet you,

I am new to this site where can someone help me with a .js code???

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