A custom React hook to detect user scroll direction

A useful React custom hook function called `useScrollDirection`, which will detect when the user scrolls up or down. A good use case would be when you want to show/hide the navigation bar. 

When you call this function, it will return a string value of 'up' or 'down' each time the user scrolls. You can edit the code to your liking and have it return whatever you want.

useScrollDirection Custom Hook

Fetch and display your Spotify top tracks list

This code snippet shows how you can retrieve your Spotify top tracks using Next.js API Routes.

The `lib/spotify.js` file contains a function `getAccessToken()` that sends a POST request to Spotify's token API endpoint, using the client ID, client secret, and refresh token provided in environment variables. The response contains an access token, which is used to send a GET request to Spotify's API endpoint to retrieve the user's top tracks for a short time period. This function is exported as `getTopTracks()`.

The `api/top-tracks.js` file imports the `getTopTracks()` function from `lib/spotify.js` and uses it to get the user's top tracks for a short time period. The API endpoint returns an array of objects, each containing the name of the artist, the name of the song, and a link to the song on Spotify. The Cache-Control header is set to cache the response for 24 hours and revalidate it after 12 hours.

Spotify Top Tracks

Display the song currently playing on your Spotify account

A useful JavaScript code snippet, using Spotify's APIs to fetch the currently playing track on your Spotify account. This example uses Next.js API Routes.

The `spotify.js` file contains a function called `getNowPlaying` that gets the user's access token for Spotify and uses it to fetch the currently playing song using the Spotify Web API. It returns the fetched data as a Promise.

The `currently-playing.js` file is an API route that calls the `getNowPlaying` function from the `spotify.js file`. It then checks whether the response from the API call is valid and contains a playing song. If it does, it returns a JSON object containing information about the song such as its title, artist, album, album image, and URL. If there is no currently playing song, it returns a JSON object indicating that there is no song playing.

Together, these components provide a way to display information about the currently playing song on a user's Spotify account.

Spotify Currently Playing

Send form submission data to Mailchimp list

A very basic example of a newsletter signup form, which takes the submitted email address and creates a new member in our Mailchimp list.

In the 2nd code block for the component, we are using the fetch function to make a POST request to the `/api/subscribe.js` route with a JSON payload containing the user's email address. The email address is extracted from the form data using the e.target.elements.email.value method, where `e` is the event object passed to the handleSubmit function.

In the handleSubmit function, we are also handling the response by calling response.json() and handling the data returned. Of course this is very basic, so you will need to tweak it to your liking.

Mailchimp Newsletter Subscribe

Creates an object containing the parameters of the current URL.

The above is just a simple example of getting the URL parameters and returning them as an object. In this example we are:

 with an appropriate regular expression to get all key-value pairs.

 to map and combine them into a single object.

 as the argument to apply to the current url.

URL Parameters as Objects

Send submitted form data to a Google Sheet

I am using `react-hook-form` to build a simple form. Once a user submits the form, the data will be inserted into my Google Sheet.

These components are responsible for creating a form that accepts user input, submitting the form data to an API route `/api/submit-sheet`, which in turn saves the data to a Google Sheet using the `appendToSheet` function.

The `appendToSheet` function is a module that uses the `googleapis` library to interact with Google Sheets API. It appends the data passed to it as a new row to a sheet with ID stored in the `process.env.NEXT_PUBLIC_GOOGLE_SHEET_ID` environment variable.

The `submit-sheet.js` API route receives the data sent by the form and passes it to the `appendToSheet` function to save to Google Sheets. It returns a success message if the data is saved successfully or an error message if the saving process fails.

The `Form` component uses the `react-hook-form` library to manage the form state and validation. When the user submits the form, it sends the form data as a POST request to the `/api/submit-sheet` API route, which handles the saving of data to Google Sheets. The success or error message is logged to the console.

Snippets

useScrollDirection Custom Hook

Spotify Top Tracks

Spotify Currently Playing

Mailchimp Newsletter Subscribe

URL Parameters as Objects

Update Google Sheets

Crenshaw

Drop me a line!

GitHub

CodePen

Twitter

Coding Snippets for web developers

Snippets

useScrollDirection Custom Hook

Spotify Top Tracks

Spotify Currently Playing

Mailchimp Newsletter Subscribe

URL Parameters as Objects

Update Google Sheets

Crenshaw

Drop me a line!

GitHub

CodePen

Twitter