ryanflorence

// 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>

developit

tracked

@tracked is a decorator for Preact that makes working with state values no different than properties on your component instance.

It's one 300 byte function that creates a getter/setter alias into state/setState() for a given key, with an optional initial value. The "magic" here is simply that it works as a property decorator rather than a function, so it appears to integrate directly into the language.

tracked has no dependencies and works with any component implementation that uses this.state and this.setState().

Installation

ryanflorence

// routes.js
const routes = [
  {
    path: '/',
    component: Home,
    exact: true
  },
  {
    path: '/gists',
    component: Gists