The best time blocking solution Find yourself needing to add a way to reserve a conference room in your office? Schedule shifts for your employees? Hotel or restaurant reservations? Project management? All of this but totally customizable???

This is the solution you've been looking for!

react-reserver is a time blocking solution. It creates a grid which allows you block out different time slots.

Working Example and Docs

Install

npm install --save react-reserver

or 

yarn add react-reserver

Usage

import React from 'react'

import Reserver, { Bar, useReserver, reserverReducer, createBar, getPosition, resizeBars} from 'react-reserver'


function App(){

   const { bars, addBar, setBars } = useReserver(reserverReducer, [])
  
    return <Reserver       
        mouseDownCell={(props) => {
            const newbar = createBar(props.dimension, props.cell);
            addBar(newbar)
        }}

        mouseEnterCell={(props) => {
            const nBars = resizeBar(bars, props)
            setBars(nBars)
        }}

        mouseUpCell={() => {  
            const dBars = bars.map((bar) => {
                if (bar.editing) {
                    return { ...bar, editing: false }
                }
                return bar;
            })
            setBars(dBars)
        }}

    >
        {

            bars.map((bar) => { return <Bar key={bar.id} {...bar} style={{ ...getPosition(bar.row, bar.column, bar.dimension) }} /> })
        }
    </Reserver>
}

License

MIT © shmuelpro