e30studio

This package is a collection of React hooks and components, its contains also useful services

Table of Contents

- Installation
- Hooks
- useToggle
- useObject
- useMemoObject
- Components
- Notifications
- SplitView
- Services
- LocalStorage
- SessionStorage

---

Installation

``
yarn add e30studio
pnpm add e30studio
npm install e30studio
`

Hooks

$3

Hook is just sugar syntax over useState

useToggle(initialValue = false)

Response:

`
{
value: boolean
toggle: () => void
on,
off,
open,
close
}
`

| Name | Type | Description |
|-------------|------------|--------------------|
| value | boolean | state of toggle |
| toggle | () => void | toggle the state |
| on / open | () => void | set state to true |
| off / close | () => void | set state to false |

##### Example

`typescript jsx
import React from 'react'
import { useToggle } from 'e30studio/hooks'

export const Foo: React.FC = () => {
const { value, toggle } = useToggle();

return


}
`

$3

Hook for handling object changes easily

##### Example

`typescript jsx
import React, { useCallback } from 'react'
import { useObject } from 'e30studio/hooks'
import { takeValueFromEvent } from 'e30studio/helpers'

export const Foo: React.FC = ({ objProp }) => {
const { state, get, set, update } = useObject({ prop1: 'value1', prop2: 'value2', prop3: 'value3' });

const handlePartialUpdate = useCallback(() => update({ prop1: '', prop2: ''}), [update])

const handleClear = useCallback(() => update({ prop1: '', prop2: '', prop3: ''}), [update])

return


}
`

$3

Hook for memorizing objects, to use it with other hooks. It uses 'fast-deep-equal' to compare objects

##### Example

`typescript jsx
import React, { useEffect } from 'react'
import { useMemoObject } from 'e30studio/hooks'

export const Foo: React.FC = ({ objProp }) => {
const stableObject = useMemoObject(objProp);

useEffect(() => {
// I am only running when object objProp really changes
}, [stableObject])

return


}
`

Components

$3

The SplitView component allows you to create a resizable two-panel layout, either vertical (left/right) or horizontal (top/bottom). You can specify which panel is limited in size via the limits prop. Sizes are persisted optionally in local storage. Styling is done via CSS classes.

#### Props

| Name | Optional | Type | Default | Description |
|-----------------|----------|---------------------------------------------|---------------|-------------------------------------------------------------------------------------------------|
| orientation | yes | 'vertical' | 'horizontal' | 'vertical' | Determines whether panels are side by side (vertical) or stacked (horizontal) |
| limits | yes | 'first' | 'second' | 'first' | Indicates which panel's min/max size should be applied |
| min | yes | number | undefined | Minimal size (px) of the limited panel |
| max | yes | number | undefined | Maximal size (px) of the limited panel |
| localStorageKey | yes | string | undefined | Key to persist the panel size in local storage |
| className | yes | string | undefined | Additional CSS class for the container |
| children | no | [React.ReactElement, React.ReactElement] | — | Two children representing the two panels |

#### CSS classes

| Element | Default class | Description |
|---------------------------|-------------------------|--------------------------------------------------|
| Container | split-view | Wrapper element |
| First panel | split-view__first | First child panel |
| Second panel | split-view__second | Second child panel |
| Resize bar | split-view__bar | Draggable bar between the panels |
| Overlay (during resizing) | split-view__overlay | Covers panels during drag to capture events |

#### Behavior

- If no min/max is provided, the panels are initially split 50/50.
- If min or max is provided, the initial split is 50/50 within those limits.
- The panel specified in limits respects the min and max constraints.
- Dragging the resize bar dynamically updates the panel size.
- While resizing, an overlay captures events to avoid accidental selection or interaction.
- Size persists in local storage if localStorageKey is provided.

#### Example

`typescript jsx
import React from 'react'
import { SplitView } from 'e30studio/components'

export const App: React.FC = () => {
return (



)
}
`

$3

AutoSize component provide dimensions of container

##### Example

`typescript jsx
import { AutoSize } from 'e30studio/components'

export const TestExample = () => (

{({ width, height }) => (
My container is {width}px x {height}px
)}

)
`

$3

Wrapper component that provide copy to clipboard functionality


##### Example

`typescript jsx
import { ContentCopy } from '@mui/icons-material'
import { CopyToClipboard } from 'e30studio/components'

const WithIcon = ({ value }) => } />

const WithStyle = styled(WithIcon)
display: flex;
gap: var(--theme-gap);

.value {
font-weight: var(--theme-font-bold);
}

.icon {
&:hover {
transform: scale(1.1);
}
}

`

Services

Service is a static class that can perform various things

$3

`typescript
interface ILocalStorageService {
get(key: string, defaultValue: T, parse?: boolean): T
set(key: string, value: string | object): void
clear(): void
}
`

#### example

`typescript jsx
import React from 'react'
import { LocalStorageService } from 'e30studio/services'

export const App: React.FC = () => {
const value = LocalStorageService.get('my-value', 'default')
const myObj = LocalStorageService.get('my-obj', { name: '', age: 0 }, true)

return


}
``

$3

works exactly the same as LocalStorageService but operates over SessionStorage