1.6.1 • Published 1 year ago
@org-serturner-institut/code-library
Licence
—
Version
1.6.1
Deps
3
Size
103 kB
Vulns
14
Weekly
0
Getting Started
Content
| Name | Type | Description |
|---|---|---|
| useBreakpointValues | Hook | Get diferent values based on media queries |
| useClickOutside | Hook | Triggers a function when clicks outside the selected HTML tag |
| useUpdateEffect | Hook | Runs the useEffect hook only when the references are updated |
| useFlexRowSize | Hook | Calculates the width of all direct children of an element (gaps included) |
| useKeyPress | Hook | |
| useScrollHorizontal | Hook | Ads the proper events to allow the horizontal scroll with the mouse |
| useSize | Hook | Get the size of an element |
| UIModal | Component (layout) | A modal component |
| NumberInput | Component | A number field with more frinedly buttons |
| SelectMultiple | Component | A multiple selector |
| Slider | Component | An horizontal slider (features: arrows, dots, loop animation) |
| ui-section-container | class (CSS) | Centers a container on the middle of the screen, has horizontal margins |
| ui-flex-center | class (CSS) | Shortcut for centers the content |
| ui-shadow-center-sm | class (CSS) | |
| ui-shadow-center-md | class (CSS) | |
| ui-shadow-center-lg | class (CSS) | |
| ui-shadow-center-xl | class (CSS) | |
| ui-shadow-bottom-sm | class (CSS) | |
| ui-shadow-bottom | class (CSS) | |
| ui-shadow-deep | class (CSS) | Special shadow to create light sources (deep) |
| ui-shadow-raised | class (CSS) | Special shadow to create light sources (raise) |
| ui-slider | class (CSS) | Adds the scroll snap features |
| cssMerge | tools | custom configuration for tailwind-merge |
| cssVariants | tools | custom configuration for tailwind-variants |
Develop: The Storybook and documentation
NPM publish
Use the library
In order to work you must configure a small things:
// tailwind.config.ts
import { UIStyles } from '@org-serturner-institut/code-library/src/tailwindcss';
const config = {
content: [
'./node_modules/@org-serturner-institut/code-library/src/**/*.{js,ts,jsx,tsx}',
// ...other paths
],
plugins: [UIStyles]
// ...other configs
}
export default config;// next.config.mjs
const nextConfig = {
// ... other configurations
transpilePackages: ['@org-serturner-institut/code-library'],
}
Status Badges
See how to configure: https://github.com/Sidnioulz/storybook-addon-tag-badges