Getting Started with Mojito Hooks

πŸƒβ€β™€οΈ Get ready with us!


Mojito Hooks uses React-Query for state management purposes. Therefore, we provide the instance of the queryClient we have so you can use it.

Use the MojitoHooksProvider component to connect and provide Mojito Hooks to your application:


The first component is an API, which you can use to connect Mojito Hooks to your application. It will also use parameters like authToken to make an API request.

import { MojitoHooksProvider } from "mojito-hooks";

function App {
    return (
        <MojitoHooksProvider authToken="eyJh...ssw5c">...</MojitoHooksProvider>


These are the parameters that can be a function in Mojito Hooks. Each parameter has a default value, like the urlPatterns parameter with UrlPatterns value.

authTokenToken that applications use to make API requests on behalf of a user.String-
onRouterChangeThe function to pass new URL into Mojito Hooks ecosystem. Optional.() =>voidUrlObserver
urlPatternsThe list of the URL patterns to disclose URL parameters. Optional.String[]UrlPatterns[]


This is a default value of the urlPatterns parameter, which can be used to disclose URL parameters by using collectionSlug and collectionItemSlug.

collectionSlugUnique Collection slug.'/:collectionSlug'
collectionItemSlugUnique Collection Item slug.'/:collectionSlug/:collectionItemSlug'


You can also combine multiple pattern properties: /:collectionSlug/:collectionItemSlug

Please see the examples below for more information:

// or:
// or:
["lfc/collections/:collectionSlug", "/items/:collectionItemSlug"];


This default value of the onRouterChange parameter can be used to pass a new URL into the Mojito Hooks ecosystem. UrlObserver is an observer function to track any location changes.


Some of the hooks require authentication to make a request. To authenticate, you have to pass your authentication token (Barer, JWT, etc.) to authToken (see MojitoHooksProvider for more details).