out-of-the-box feature and ts hint support. design with signal pattern(like mobx), provide user interface and easy manage settings.
config.ts
import { initSetting, config } from '@apad/setting-panel'
// Some framework process css files in the development environment, and there may be problems with loading the internal css.
// Please add this code according to the situation, or simply `import '@apad/setting-panel/lib/index.css'`
if(process.env.NODE_ENV == 'development'){
import('@apad/setting-panel/lib/index.css');
}
type FontSizeType = 'small' | 'middle' | 'big'
export const { configStore, openSettingPanel } = initSetting({
settings: {
bg: '#6cf',
isDark: false,
// support ts type check
type: 'style-a' as 'style-a' | 'style-b',
// arr type
arr: ['a', 'b', 'c'],
// complex config. add description, label
lineHeight: {
label: 'line height',
desc: 'set text line height',
defaultValue: 1,
},
// group select support
fontSize: config<FontSizeType>({
type: 'group',
group: [
'middle',
'small',
// complex config
{
value: 'big',
label: 'BIG FONT!',
desc: 'BIG BIG BIG',
},
],
defaultValue: 'middle',
}),
},
})
App.tsx
import { configStore, openSettingPanel } from './config'
// make component auto update when configStore change
import { observer } from '@apad/setting-panel/react'
export default observer(() => {
return (
<div
style={{ background: configStore.bg }}
onClick={() => openSettingPanel()}
>
type: {configStore.type}
</div>
)
})
very good! You can replace my incomplete version mini-mobx to real mobx🤣
config.ts
// ...
import * as mobx from 'mobx'
import { observer } from 'mobx-react'
initSetting({
mobx,
mobxObserver: observer,
// ...
})
App.tsx
// use mobx-react
// import { observer } from '@apad/setting-panel/react'
import { observer } from 'mobx-react'
export default observer(() => {
// ...
})
I recommend to use preact version, It is smaller than the full react version
// import { initSetting, config } from '@apad/setting-panel'
import { initSetting, config } from '@apad/setting-panel/preact'
// ...