@dune2/tools

React utility library with common tools and components.

Installation

npm install @dune2/tools

Modules

Factory

React state management utilities for creating context providers.

import { createStateContext } from '@dune2/tools/factory/createStateContext';

const { Provider, useContextValue } = createStateContext({
  name: 'Counter',
  useValueHooks: ({ initialCount = 0 }) => {
    const [count, setCount] = useState(initialCount);
    return { count, setCount };
  },
});

Storage

Browser storage wrapper with React hooks integration.

import { createStorage } from '@dune2/tools/storage';

class DataMap {
  token = '';
  user = null;
}

const storage = createStorage({
  DataMap,
  namespace: 'app',
  storageType: 'local', // or 'session'
});

// Use in React
const token = storage.token.useValue();

RQ (React Query)

Enhanced React Query utilities with built-in request building.

import { RequestBuilder } from '@dune2/tools/rq';

const userApi = new RequestBuilder({
  url: '/api/users/{id}',
  method: 'get',
  urlPathParams: ['id'],
});

// Use in components
const { data, isLoading } = userApi.useQuery({ id: '123' });

Store

Valtio-based state management with TypeScript support.

import { createStore } from '@dune2/tools/store';

const counterStore = createStore({
  name: 'counter',
  state: { count: 0 },
  actionsCreator: (state) => ({
    increment: () => state.count++,
    decrement: () => state.count--,
  }),
});

// Use in components
const { count } = counterStore.useSnapshot();

Numbro

BigNumber.js wrapper for precise number formatting and calculations.

import { numbro } from '@dune2/tools/numbro';

const price = numbro(123.456);
price.format({ mantissa: 2 }); // "123.46"
price.formatCurrency({ symbol: '$' }); // "$123.46"

Shared

TypeScript utility types for better type safety.

import type { OptionalKeys, Overwrite, Print } from '@dune2/tools/shared';