npm package: @org-serturner-institut/code-library
Description: ## Content
Latest version: 1.6.1

# 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:

```typescript
// 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;
```

```typescript
// 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