@mntzdevs/label-generator

Label Generator library - React component library for creating and editing label templates.

Installation

npm install @mntzdevs/label-generator

That's it! All required dependencies (including Mantine) will be installed automatically.

Peer Dependencies

Only React and ReactDOM are peer dependencies (if you're using React in your project, you likely already have them):

• react >= 18.0.0
• react-dom >= 18.0.0

Note: Tailwind CSS is bundled with the library CSS, so you don't need to install it separately. However, if you're using Tailwind in your project, make sure it doesn't conflict.

Usage

Plain JavaScript

Important: Make sure you're using a bundler (like Vite, Webpack, or Parcel) that supports ES modules and package.json exports. If you're using a simple HTML file with <script type="module">, you may need to configure your dev server to properly resolve npm packages.

import { create } from '@mntzdevs/label-generator';
import '@mntzdevs/label-generator/label-generator.css';

const rootElement = document.getElementById('label-generator');
const api = create(rootElement);

// Set initial template
api.setState({
  canvas: {
    width: 100,
    height: 50,
    unit: 'mm',
    dpi: 300,
  },
  nodes: [],
  print: {
    format: 'sheet',
  },
});

// Get current state
const state = api.getState();

React

import { LabelGenerator } from '@mntzdevs/label-generator/react';
import '@mntzdevs/label-generator/label-generator.css';

function App() {
  const apiRef = useRef<LabelGeneratorApi>(null);

  useEffect(() => {
    if (apiRef.current) {
      apiRef.current.setState({
        canvas: {
          width: 100,
          height: 50,
          unit: 'mm',
          dpi: 300,
        },
        nodes: [],
        print: {
          format: 'sheet',
        },
      });
    }
  }, []);

  return <LabelGenerator ref={apiRef} />;
}

Important: CSS Import

You must import the CSS file for the library to work correctly:

import '@mntzdevs/label-generator/label-generator.css';

This CSS file includes:

• Tailwind CSS utilities (all classes used by the library components)
• Library-specific styles

Important: The CSS file is already processed and includes all Tailwind classes used by the library. You don't need to install or configure Tailwind CSS in your project.

API

create(selectorOrElement: string | HTMLElement): LabelGeneratorApi

Creates a new label generator instance.

Returns:

• getState(): Template | null - Get current template state
• setState(template: Template): void - Set template state

React Component

<LabelGenerator ref={apiRef} />

The component exposes the same API through a ref.

Examples

See the examples/ directory for complete examples:

• examples/plain/ - Plain JavaScript example
• examples/react/ - React example

Development

# Install dependencies
npm install

# Run development server
npm run dev

# Build library
npm run build:lib

Troubleshooting

Error: Cannot find module '@mntzdevs/label-generator/dist/index.js' or 'dist/index.js not found'

This error occurs when your bundler or browser tries to resolve the module incorrectly. Here are solutions:

1. Make sure you're using the correct import:

   // ✅ Correct
   import { create } from '@mntzdevs/label-generator';
      
   // ❌ Wrong - don't import from dist directly
   import { create } from '@mntzdevs/label-generator/dist/index.js';

2. If using Vite, ensure proper module resolution:

   • Vite should automatically resolve package.json exports
   • If you're using a custom Vite config, make sure you're not overriding module resolution

3. If using a dev server that doesn't support package.json exports:

   • Use a bundler like Vite, Webpack, or Parcel
   • Or configure your dev server to properly resolve npm packages

4. Build the library first (if using locally):

   cd path/to/label-generator
   npm run build:lib

5. If using npm link, rebuild after changes:

   # In library directory
   npm run build:lib
      
   # In parent app, restart dev server

CSS not loading in plain JS

Make sure you import the CSS file:

import '@mntzdevs/label-generator/label-generator.css';

License

MIT