*Пример того о чем пойдет речь:*

<CardsExample
itemsJson='[
  {"id":0,"title":"Card 1"},
  {"id":1,"title":"Card 2"},
  {"id":2,"title":"Card 3"}
]'
/>

## CSS

Спецификация CSS Scroll Snap позволяет привязывать положение прокрутки к определённым элементам или местоположению после того, как пользователь прокрутил страницу или элемент.

```css
.wrapper {
  display: flex;
  gap: 8px;
  flex-direction: row;
  flex-wrap: nowrap;

  overflow-x: scroll;
  scroll-snap-type: x mandatory;

  /* NOTE: [1/2] Если нужны первая и последняя по центру */
  padding-left: 10%;
  padding-right: 10%;
}

.wrapper::-webkit-scrollbar {
  display: none;
}

.cardWrapper {
  scroll-snap-align: center;

  /* NOTE: [2/2] Если нужен хвост и перед, но [1/2] выключено */
  min-width: 100%;
  width: 100%;
}

.card {
  height: 100%;
  padding: 8px 8px 8px 8px;
  border-radius: 8px;
  font-size: small;
  border: 1px solid #959eaa;
}
```

## React-компонент с перелистыванием карочек

### `SubjobsExperimentalCards.tsx`
```tsx
import { CSSProperties, memo } from 'react'
import classes from './SubjobsExperimentalCards.module.scss'

const genericMemo: <T>(component: T) => T = memo

type TProps<T> = {
  wrapperStyles?: CSSProperties;
  items: T[];
  cardRenderer: (ps: { itemData: T }) => React.ReactNode;
  getItemKey: (itemData: T) => string;
}

function _SubjobsExperimentalCards<TItem>({
  wrapperStyles,
  items,
  cardRenderer,
  getItemKey,
}: TProps<TItem>) {
  return (
    <>
      {
        items.length > 0 && (
          <div
            style={wrapperStyles}
            className={classes.wrapper}
          >
            {
              items.map((item) => {
                return (
                  <div
                    className={classes.cardWrapper}
                    key={getItemKey(item)}

                  >
                    {cardRenderer({ itemData: item })}
                  </div>
                )
              })
            }
          </div>
        )
      }
    </>
  )
}

export const SubjobsExperimentalCards = genericMemo(_SubjobsExperimentalCards)
```

### Usage
```tsx
<SubjobsExperimentalCards
  items={[
    { id: 1 }
  ]}
  cardRenderer={({ itemData }) => (
    return (
      <div>{itemData.id}</div>
    )
  )}
  getItemKey={(item) => String(item.id)}
/>
```

See also
- https://habr.com/ru/articles/498456/
- https://doka.guide/css/scroll-snap-type/

#cssOnly #reactComponent Компонент с перелистыванием карточек | scroll-snap-type

https://www.npmjs.com/package/json-edit-react

#reactComponent JSON editor reps (open source)

# [react-modal-sheet](https://www.npmjs.com/package/react-modal-sheet)
```bash
yarn add react-modal-sheet framer-motion
```

React animated bottomsheet | #reactComponent #menu

json objs comparison #reactComponent tst

- 2025 https://habr.com/ru/articles/874826/comments/#comment_27866000
- https://www.npmjs.com/package/keen-slider, [Examples](https://keen-slider.io/examples)
- https://www.npmjs.com/package/embla-carousel, [Examples](https://www.embla-carousel.com/examples/static/)
- **https://github.com/vadymshymko/react-simply-carousel with SSR support**

#reactComponent | Carousel swiper

https://www.npmjs.com/package/react-modal-global

#reactComponent | react-modal-global

https://www.npmjs.com/package/react-final-form

#reactComponent Form

https://github.com/soywod/react-pin-field

PIN field (numeric) #reactComponent

https://github.com/mariofornaroli/y-react-upload-file/blob/main/src/FileItem/FileItem.jsx

reactComponent