In Gatsby, leverage Reach Router's useLocation hook along with the query-string package to parse URL query string parameters and use the value to update state.
First, install:
npm install @reach/router query-string
Reach Router is used by Gatsby, but you'll need it in your package.json if linters are in use.
In this example, change the user's selected theme, or expand to any values you need from the URL parameters, available on location.search from the useLocation hook.
import * as React from 'react';
import { useLocation } from '@reach/router';
import queryString from 'query-string';
const getSelectedTheme = (query) => {
const fallback = 'light';
if (query) {
const queriedTheme = queryString.parse(query);
const { theme } = queriedTheme;
// Ensure a valid expected value is passed
if (['light', 'dark'].includes(theme)) {
return theme;
}
return fallback;
}
return fallback;
};
const UserTheme = () => {
const location = useLocation();
const defaultTheme = (location.search && getSelectedTheme(location.search)) || 'light';
const [theme, setTheme] = React.useState(defaultTheme);
// rest of component, maybe creates/updates context, or updates a form setting
};
This method is an update to use hooks and a functional component based on the example in the article How to Get Query String Parameter Values in Gatsby by Christopher Fitkin.
Top comments (2)
Is it necessary to
useLocation? Gatsby passes location via props to any component.If I'm understanding correctly,
locationis provided to "page" components, whereas this is a functional component/hook combo for flexibility in accessing this information.The main reason for the additional install is this came from a project using Typescript so it needed to be explicitly defined in the
packageto avoid linting errors/leverage intellisense.But thanks for bringing that to my attention, I'm sure it would be useful in other scenarios!