@op-ent/unstyled-ui
is an headless react library.
When it comes to components libaries, there are two main approaches:
!important
in CSS for example). Using these libraries will result in a library style, not your brand style.So here comes unstyled-ui
, whose purpose is to conciliate both approaches :
unstyled-ui
is a kind of interfacecolor
prop is only of type string
by default, but can be changed via TypeScript module augmentation to 'primary' | 'secondary'
.Install package:
# npm
npm install @op-ent/unstyled-ui
# yarn
yarn install @op-ent/unstyled-ui
# pnpm
pnpm install @op-ent/unstyled-ui
Import example:
// ESM
import { Button } from '@op-ent/unstyled-ui'
// CommonJS
const { Button } = require('@op-ent/unstyled-ui')
// lib/config.ts
import { createConfig } from '@op-ent/unstyled-ui'
declare module '@op-ent/unstyled-ui' {
interface CustomizableComponentsPropsOverride {
button: {
variant: 'primary' | 'secondary'
}
}
}
export const { config, extendConfig } = createConfig({
components: {
button: {
defaultProps: {
variant: 'secondary',
},
customProps: ['variant'],
},
},
})
import { ConfigProvider } from '@op-ent/unstyled-ui'
import { config } from '~/lib/config'
function App() {
return (
<ConfigProvider config={config}>
<Button variant="primary">Hello world</Button>
</ConfigProvider>
)
}
Using CSS data parts:
.uui-button[data-part='root'] {
}
.uui-button[data-part='loader'] {
}
.uui-button[data-part='left-icon'] {
}
.uui-button[data-part='right-icon'] {
}
.uui-button[data-part='children'] {
}
.uui-button[data-part='loading-text'] {
}
WARNING: This is a work in progress.
- This list is not complete and may change at any time.
- Names may change in the future.
TBD
yarn install
yarn dev
yarn test
Published under MIT License.
Made with ❤️ by Florian LEFEBVRE in France.
Sponsors | |
---|---|
|
|