<div id="root"></div>
* {
  box-sizing: border-box;
  font-family: 'Open Sans', Arial;
  padding: 0;
  margin: 0;
}

.counter {
  background-color: #61dafb;
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.counter > * {
  margin: 10px 0;
}

.counter h2 {
    font-size: 21px;
    text-align: center;
    max-width: 600px;
}

.counter p {
  font-size: 18px;
  text-align: center;
}

.counter button {
  background: #20232a;
  border: 0;
  border-radius: 10px;
  color: #FFF;
  cursor: pointer;
  font-size: 18px;
  outline: none;
  padding: 10px 20px;
}

.counter button:active {
  background-color: #2c2f37;
}

.counter a {
  position: absolute;
  bottom: 3px;
  font-style: italic;
}
const themeProperties = {
  reactColors: {
    class: 'counter'
  }
};

const themeContext = React.createContext(themeProperties.reactColors);

function CounterComponent() {
  // Declares a "count" state variable initialized with value 0.
  const [count, setCount] = React.useState(0);
  
  // Declares a context variable with access to the theme properties
  const theme = React.useContext(themeContext);
  
  // Declares a variable to get the width from the custom hook 
  const width = useWindowWidth();
  
  // Fires setCount(0) only when the width changes
  // Another approach to avoid having this effect here could be maybe
  // to pass the setCount updater to the useWindowWidth hook and reset the counter there.
  React.useEffect(() => {
    setCount(0);
  }, [width])

  // Sets the new state of "count"
  const handleClick = () => setCount(count + 1);
  
  return (
    <div className={ theme.class }>
      <h2>A counter based on your screen width, uses useState, useContext, useEffect and custom Hooks!</h2>
      <p>You clicked {count} times on a width of {width}px</p>
      <button onClick={handleClick}>
        Click me
      </button>
      <a href="https://enmascript.com/articles/2018/10/26/react-conf-2018-understanding-react-hooks-proposal-with-simple-examples">source: EnmaScript.com</a>
    </div>
  );
}

// Our custom hook to get the current width
function useWindowWidth() {
  // Declares a variable to get and set the width of the screen
  const [width, setWidth] = React.useState(window.innerWidth);

  React.useEffect(() => {
    const handleResize = () => {
      setWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);
    
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });
  
  return width;
}

ReactDOM.render(
  <CounterComponent />,
  document.getElementById('root')
);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.0/umd/react.production.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.0/umd/react-dom.production.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js