gragland

---
version: 1.0
domains:
- www.producthunt.com
url_patterns:
- www.producthunt.com/*
timestamp: '2018-07-31T15:27:10Z'
id: VSi0
redirect_url: https://www.producthunt.com/
shared_via: StyleURL - (https://styleurl.app) import and export CSS changes from Chrome

gragland

import { useState } from 'react';

// Usage
function App() {
  const [name, setName] = useLocalStorage('name', '');

  return (
    <div>
      <input
        type="text"

gragland

import { useState, useEffect, useRef } from 'react';

// Let's pretend this <Counter> component is expensive to re-render so ...
// ... we wrap with React.memo, but we're still seeing performance issues :/
// So we add useWhyDidYouUpdate and check our console to see what's going on.
const Counter = React.memo(props => {
  useWhyDidYouUpdate('Counter', props);
  return <div style={props.style}>{props.count}</div>;
});

gragland

// Current auth status
let currentAuth = false;

// Holds setAuth for every instance of hook
const authSetters = new Set();

function useFakeAuth() {
  // Auth state and setter
  const [auth, setAuth] = useState(currentAuth);

gragland

import { useState, useRef } from 'react';
import { useSpring, animated } from 'react-spring';

// Displays a row of cards
// Usage of hook is within <Card> component below
function App() {
  return (
    <div className="container">
      <div className="row">
        {cards.map((card, i) => (

gragland

import Router from 'next/router';
import Analytics from 'analytics';
import googleAnalyticsPlugin from 'analytics-plugin-ga';

const analytics = Analytics({
  debug: process.env.NODE_ENV !== 'production',
  plugins: [
    googleAnalyticsPlugin({
      trackingId: process.env.GA_TRACKING_ID
    })

gragland

import { useState, useLayoutEffect } from 'react';

// Usage
function App(){
  // State for our modal
  const [modalOpen, setModalOpen] = useState(false);
  
  return (
    <div>
      <button onClick={() => setModalOpen(true)}>Show Modal</button>

gragland

  
  const signinAnonymously = () => {
    return firebase.auth().signInAnonymously()
      .then(response => {
        setUser(response.user);
        return response.user;
      });
  };
  
  etc...

gragland

// Usage
export function useUser(uid) {
  return useQuery(uid && firestore.collection("users").doc(uid));
}

// Custom useQuery hook for Firestore
function useQuery(query) {
  const [queryState, setQueryState] = useState({
    status: "loading",
    data: undefined,

gragland

// Usage
function ProfilePage({ uid }) {
  // Subscribe to Firestore document
  const { data, status, error } = useFirestoreQuery(
    firestore.collection("profiles").doc(uid)
  );
  
  if (status === "loading"){
    return "Loading..."; 
  }