Development utilities for Nacelle React projects

Usage no npm install needed!

<script type="module">
  import nacelleReactDevUtils from 'https://cdn.skypack.dev/@nacelle/react-dev-utils';



React utility functions & TypeScript types for creating Nacelle projects


With NPM

npm i @nacelle/react-dev-utils


The majority of the types are generated from our GraphQL schemas using Graphql Code Gen. In addition, we extend this type for some of the frontend applcations, and this can be found in ./src/types/custom.

To generate new types manually, use npm run generate. You'll need the appropriate environment variables for this to be successful. Speak with someone on the dev team to get these if needed.


Useful mock data for writing tests.

  • shopifyItem: A typical Shopify item object
  • klaviyoItem: An item that has been used within a mock Klavyio store and can be used to see results for the Klaviyo Shopify integration

Utility Functions


Creates a function for formatting international currencies.

import { formatCurrency } from '@nacelle/react-dev-utils';

const formatPrice = formatCurrency('ja-JP', 'JPY');

const price = formatPrice(2744); // ¥2,744