Official setters library for EasyEditor - A collection of property setter components
npm install @easy-editor/settersOfficial setters library for EasyEditor - A collection of property setter components for the visual low-code editor.
``bash`
npm install @easy-editor/settersor
pnpm add @easy-editor/setters
`typescript
import { setterMap } from '@easy-editor/setters'
// Register all setters at once
Object.entries(setterMap).forEach(([name, setter]) => {
editor.setters.register(name, setter)
})
`
`typescript
import { StringSetter, NumberSetter, ColorSetter } from '@easy-editor/setters'
// Register individually
editor.setters.register('StringSetter', StringSetter)
editor.setters.register('NumberSetter', NumberSetter)
editor.setters.register('ColorSetter', ColorSetter)
`
`typescript
import StringSetter from '@easy-editor/setters/StringSetter'
editor.setters.register('StringSetter', StringSetter)
`
`html`
`typescript`
{
name: 'title',
title: 'Title',
setter: 'StringSetter',
extraProps: {
placeholder: 'Enter title...',
suffix: 'px',
},
}
`typescript`
{
name: 'fontSize',
title: 'Font Size',
setter: 'NumberSetter',
extraProps: {
min: 12,
max: 72,
step: 2,
suffix: 'px',
},
}
`typescript`
{
name: 'color',
title: 'Color',
setter: 'ColorSetter',
extraProps: {
disableAlpha: false,
},
}
`typescript`
{
name: 'rect',
title: 'Position & Size',
setter: 'RectSetter',
extraProps: {
getValue(target) {
return target.getExtraPropValue('$dashboard.rect')
},
setValue(target, value) {
target.setExtraPropValue('$dashboard.rect', value)
},
},
}
`typescript`
{
name: 'visible',
title: 'Visible',
setter: 'SwitchSetter',
extraProps: {
defaultValue: true,
},
}
`typescript`
{
name: 'image',
title: 'Image',
setter: 'UploadSetter',
extraProps: {
accept: '.jpg,.jpeg,.png,.gif',
maxSize: 5 1024 1024, // 5MB
},
}
`typescript`
{
type: 'group',
title: 'Advanced Settings',
setter: {
componentName: 'CollapseSetter',
props: {
icon: true,
},
},
items: [
// ... nested field configs
],
}
`typescript`
{
type: 'group',
title: 'Settings',
setter: 'TabSetter',
items: [
{
type: 'group',
key: 'basic',
title: 'Basic',
items: [/ ... /],
},
{
type: 'group',
key: 'advanced',
title: 'Advanced',
items: [/ ... /],
},
],
}
All setters are fully typed with TypeScript:
`typescript`
import type { StringSetterProps, NumberSetterProps, ColorSetterProps, UploadValue } from '@easy-editor/setters'
The package supports multiple import methods:
- Default: import setterMap from '@easy-editor/setters'import { StringSetter, NumberSetter } from '@easy-editor/setters'
- Named: import StringSetter from '@easy-editor/setters/StringSetter'
- Specific:
`html`
`html``
- ✅ 9 Built-in Setters - Covers most common property types
- ✅ TypeScript Support - Fully typed with IntelliSense
- ✅ Multiple Import Methods - Use all or individual setters
- ✅ CDN Ready - UMD build for browser usage
- ✅ Zero Dependencies - Only peer dependencies (React, @easy-editor/core)
- ✅ Lightweight - Small bundle size with tree-shaking support
- ✅ Customizable - Pure inline styles, no CSS dependencies
MIT © JinSo
- EasyEditor - Core editor
- EasyMaterials - Official materials library
If you have any questions or suggestions, please submit an Issue.