# @event-manager/react

> Event manager component for react

Latest version **1.3.0** (published 2024-09-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @event-manager/react
pnpm add @event-manager/react
yarn add @event-manager/react
bun add @event-manager/react
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.0 |
| Published | 2024-09-25 |
| First published | 2023-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Juris Bandenieks |
| Maintainers | jurisbandenieks |
| Keywords | react, timeline, events, calendar |

## Links

- npm: https://www.npmjs.com/package/@event-manager/react
- Repository: https://github.com/jurisbandenieks/event-manager
- Homepage: https://github.com/jurisbandenieks/event-manager#readme
- Issues: https://github.com/jurisbandenieks/event-manager/issues
- npm.io page: https://npm.io/package/@event-manager/react

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.3.0 (latest) — 2024-09-25
- 1.2.0 — 2023-08-04
- 1.1.3 — 2023-08-02
- 1.1.2 — 2023-08-02
- 1.1.1 — 2023-08-02
- 1.1.0 — 2023-08-01
- 1.0.5 — 2023-07-31
- 1.0.4 — 2023-07-31
- 1.0.3 — 2023-07-31
- 1.0.2 — 2023-07-31
- 1.0.1 — 2023-07-31
- 1.0.0 — 2023-07-29
- 0.8.14 — 2023-07-27
- 0.8.13 — 2023-07-27
- 0.8.12 — 2023-07-27
- … 67 more at https://npm.io/package/@event-manager/react/versions

## README

![build](https://github.com/jurisbandenieks/event-manager/actions/workflows/main.yml/badge.svg)

[StackBlitz example](https://stackblitz.com/edit/event-manager-react)

# React Timeline manager component

View and manage resources on a timeline

No dependancies used

## Installation

`npm install @event-manager/react`

## Usage

`import { EventManager } from '@event-manager/react'`

![alt text](https://github.com/jurisbandenieks/event-manager/blob/HEAD/images/event-manager.png)

- This component provides tools for firing events but does not handle data processing.
- It is the responsibility of the user to determine how to interact with the data during these events.

### Example

```
import React, { useMemo, useState } from 'react'
import { resources } from './data'
import {
  MonthYear,
  EventManager,
  ClickData,
  Page,
  Resource,
  getYearAndMonth,
} from './'
import { TextField, TablePagination } from '@mui/material'

function App() {
  const [page, setPage] = useState<Page>({
    current: 0,
    size: 10,
    count: Math.ceil(resources.length / 10),
    total: resources.length,
  })
  const [data, setData] = useState<Resource[]>([])
  const [monthYear, setMonthYear] = useState<Date>(getYearAndMonth())
  const [loading, setLoading] = useState(false)

  // This can be any async fetch function
  // This function is triggered my page change
  useMemo(() => {
    setLoading(true)
    setTimeout(() => {
      const data = resources.slice(
        page.current * page.size,
        (page.current + 1) * page.size,
      )
      setData(data)
      setLoading(false)
    }, 500)
  }, [page, monthYear])

  const handleClick = (data: ClickData | undefined) => {
    console.log(data)
  }

  const handleUpdateDate = (date: Date) => {
    console.log(date)
    setMonthYear(date)
  }

  const handleSearch = (text: string) => {
    console.log(text)
  }

  const handleChangePage = (
    _event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null,
    newPage: number,
  ) => {
    setPage({ ...page, current: newPage })
  }
  const handleChangeRowsPerPage = (
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
  ) => {
    setPage({ ...page, size: Number(e.target.value) })
  }

  return (
    <div className='app'>
      <EventManager
        resources={data}
        tableId={1}
        search={
          <TextField
            variant='standard'
            label='Search'
            sx={{
              margin: '0 0 24px',
            }}
            onChange={(e) => handleSearch(e.target.value)}
          />
        }
        pagination={
          <TablePagination
            component='div'
            count={page.total}
            page={page.current}
            onPageChange={handleChangePage}
            rowsPerPage={page.count}
            onRowsPerPageChange={handleChangeRowsPerPage}
          />
        }
        actionsPossition='top'
        showLegend
        showTooltip
        loading={loading}
        onClick={handleClick}
        onUpdateDate={handleUpdateDate}
      />
    </div>
  )
}

export default App

```

## Used Types

```
Event {
  start: Date
  end?: Date
  title: string
  color?: string
}
```

```
Resource {
  id: string
  title: string
  label?: string
  events: Event[]
}
```

```
MonthYear {
  month: number
  year: number
}
```

```
ClickData = {
  event: Event
  resourceId: string
}
```

```
ID = number | string
```

```
Page = {
  current: number
  size: number
  count: number
  total: number
}
```

```
handleClick(data: ClickData | undefined) => void
handleUpdateDate(data: Date) => void
```

## Timeline Props

```
<EventManager
  resources={data}
  tableId={1}
  search={
    <TextField
      variant='standard'
      label='Search'
      onChange={(e) => handleSearch(e.target.value)}
    />
  }
  pagination={
    <TablePagination
      component='div'
      count={page.total}
      page={page.current}
      onPageChange={handleChangePage}
      rowsPerPage={page.count}
      onRowsPerPageChange={handleChangeRowsPerPage}
    />
  }
  showLegend
  showTooltip
  hasWeekends
  loading={loading}
  onClick={handleClick}
  onUpdateDate={handleUpdateDate}
/>
```

```
Props = {
  resources: Resource[]
  tableId: ID
  hasWeekends?: boolean // default false
  flat?: boolean // default false
  showLegend?: boolean // default false
  showTooltip?: boolean // default false
  loading?: boolean // default false
  multiLine?: boolean // default true
  search?: ReactElement<HTMLInputElement>
  pagination?: ReactElement<HTMLDivElement>
  title?: string
  actionsPossition?: 'top' | 'bottom' // default 'top'
  noDataText?: string // default 'No data'
  onClick?: (data: ClickData | undefined) => void
  onUpdateDate: (date: Date) => void
}
```

---
_Source: https://npm.io/package/@event-manager/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._