Snowball Logo

# Using with React

Snowball is designed to be used with any front-end framework, including React.

Here's how you can hook Snowball state into your React application:

javascript
const snowball = Snowball.withAuth({
  // google: ...
}).create({
  apiKey: 'your-snowball-api-key',
  initialChain: SnowballChain.sepolia,
})

export function useSnowball() {
  const [state, setState] = useState(100) // Value doesn't matter

  useEffect(() => {
    // Subscribe and directly return the unsubscribe function
    return snowball.subscribe(() => setState(state + 1))
  }, [state])

  return snowball
}

Then, elsewhere in your application, you can use the useSnowball hook to access your Snowball instance:

javascript
function MyComponent() {
  const snowball = useSnowball()
  const google = snowball.auth.google

  function handleRedirectBack() {
    // ...
  }

  return (
    <button
      onClick={() => {
        google.startOAuthRedirect()
      }}
    >
      {google.state.loading ? 'Loading...' : 'Sign in with Google'}
    </button>
  )
}