English | 中文 | CHANGELOG

Like native enum, but much better!

A solution for business dictionary management.

Supported Platforms

Introduction • Get Started • API Reference • Global Configuration • User Stories • Plugin System • Localization • Extensibility • Best Practices • Compatibility • FAQ

Native enums are great for constants, but product code usually needs more at runtime:

• human-readable label,
• metadata such as color, icon, or permission
• dropdowns, checkboxes, and menus,
• table filters,
• render a label in a table,
• render a badge color,
• localization,
• metadata lookups,
• validation and lookup helpers.

enum-plus keeps the direct enum-style experience, then adds those runtime capabilities in one place.

It's a front-end business dictionary solution, that provides a lightweight data source. It's part of the front-end infrastructure.

• Compatible with the usage of native enums
• Supports multiple data types such as number and string
• Enhanced enum items with display names
• Internationalization support for display names, can be integrated with any i18n library
• Converts values directly into display names, simplifying data display in the UI
• Extensible design, allowing custom metadata fields for enum items
• Plugin system design, extending enum functionality through plugin installations
• Supports type narrowing to enhance type safety  ^TypeScript
• Generates dropdowns from enums, compatible with UI libraries like Ant Design, Element Plus, Material-UI
• Compatible with various environments including Browsers, Node.js, React Native, Taro, and mini-programs
• Supports server-side rendering (SSR)
• Compatible with any front-end development framework, including vanilla projects
• TypeScript‑oriented, providing excellent type inference and code completion capabilities
• Zero dependencies
• Lightweight (min+gzip 2KB+ only)

npm install enum-plus

import { Enum } from 'enum-plus';

const StatusEnum = Enum({
  Draft: { value: 1, label: 'Draft', color: 'default' },
  Review: { value: 2, label: 'In Review', color: 'processing' },
  Published: { value: 3, label: 'Published', color: 'success' },
});

StatusEnum.Review; // 2
StatusEnum.label(2); // 'In Review'
StatusEnum.key(2); // 'Review'
StatusEnum.items; // [{ key: 'Draft', value: 1, label: 'Draft' }, ...]
StatusEnum.values; // [1, 2, 3]
StatusEnum.labels; // ['Draft', 'In Review', 'Published']
StatusEnum.meta; // { color: [ 'default', 'processing', 'success' ] }
StatusEnum.findBy('color', 'success')?.key; // 'Published'
StatusEnum.toList({ valueField: 'value', labelField: 'label' }); // [{ value: 1, label: 'Draft' }, ...]

• @enum-plus/plugin-react
• @enum-plus/plugin-react-i18next
• @enum-plus/plugin-i18next
• @enum-plus/plugin-i18next-vue
• @enum-plus/plugin-vue-i18n
• @enum-plus/plugin-next-international
• @enum-plus/plugin-antd

If this project helps you, please consider giving it a star ⭐️ on GitHub. This will encourage us to continue developing and maintaining this project.