Divjoy-components NPM

This project was created with Divjoy ✨

👉 Get Started

Install dependencies

npm install

Install the ZEIT Now CLI

npm install -g now

Run the development server

now dev

When the above command completes you'll be able to view your website at http://localhost:3000.

Note: You can run just the front-end with npm run start, but now dev also handles running your API endpoints (located in the /api directory).

🥞 Stack

This project uses the following libraries and services:

Framework - Create React App with React Router
Styling - Bulma with custom SASS styles
Authentication - Firebase Auth
Newsletter - Mailchimp (via server endpoint)
Contact Form - Amazon SES (via server endpoint)
Analytics - Google Analytics
Hosting - ZEIT Now

📚 Guide

function MyComponent(){ // Get the router object const router = useRouter();

// Get value from query string (?postId=123) or route param (/:postId)
console.log(router.query.postId);

// Get current pathname
console.log(router.pathname)

// Navigate with the <Link> component or with router.push()
return (
  <div>
    <Link to="/about">About</Link>
    <button onClick={(e) => router.push('/about')}>About</button>
  </div>
);

}

</p>
</details>

<details>
<summary><b>Authentication</b></summary>

<p>
  This project uses <a href="https://firebase.google.com">Firebase Auth</a> and includes a convenient <code>useAuth</code> hook (located in <code><a href="src/util/auth.js">src/util/auth.js</a></code>) that wraps Firebase and gives you common authentication methods. Depending on your needs you may want to edit this file and expose more Firebase functionality.

```js
import { useAuth } from './../util/auth.js';

function MyComponent(){
  // Get the auth object in any component
  const auth = useAuth();

  // Depending on auth state show signin or signout button
  // auth.user will either be an object, null when loading, or false if signed out
  return (
    <div>
      {auth.user ? (
        <button onClick={(e) => auth.signout()}>Signout</button>
      ) : (
        <button onClick={(e) => auth.signin('hello@divjoy.com', 'yolo')}>Signin</button>
      )}
    </div>
  );
}