Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
// Adds a lovely fade in of the modal
// and a gentle slide-down of the modal content
class Demo extends React.Component {
state = { showDialog: false };
render() {
return (
<div>
<button onClick={() => this.setState({ showDialog: true })}>
Show Dialog
</button>
<Transition
from={{ opacity: 0, y: -10 }}
enter={{ opacity: 1, y: 0 }}
leave={{ opacity: 0, y: 10 }}
>
{this.state.showDialog &&
(styles => (
<DialogOverlay style={{ opacity: styles.opacity }}>
<DialogContent
style={{
transform: `translate3d(0px, ${styles.y}px, 0px)`,
border: "4px solid hsla(0, 0%, 0%, 0.5)",
borderRadius: 10
}}
>
<button onClick={() => this.setState({ showDialog: false })}>
Close Dialog
</button>
<p>React Spring makes it too easy!</p>
</DialogContent>
</DialogOverlay>
))}
</Transition>
</div>
);
}
}
@ryanflorence

This comment has been minimized.

Copy link
Owner Author

@ryanflorence ryanflorence commented Aug 27, 2018

Eventually will live at https://reach.tech/ui

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.