Basic

This is the most basic example. A grid, 500px wide and 500px high is created, since those are the default props.

tip

Click and drag on any square in the grid to create a new bar

The code

import React from 'react'
import styles from './basicexamples.module.css'
import Reserver, 
{ Bar, 
useReserver,
reserverReducer,
createBar, 
getPosition, 
resizeBars } from 'react-reserver'

export default function Basic(props) {
    const { bars, addBar, setBars } = useReserver(reserverReducer, [])    
    return <Reserver 
    cellClassName={styles.row_cell}
        mouseDownCell={(props) => {
            const newbar = createBar(props.dimension, props.cell);
            addBar(newbar)
        }}
        mouseEnterCell={(props) => {
            const nBars = resizeBars(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>
}

.row_cell {
    border: 1px solid #eaeaea;
    color: hsl(0, 0%, 0%);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    position: relative;
    align-items: center;
    justify-content: center;
    z-index: 1;
    background: white;
}

So whats going on here? In order to allow you to control the state of Reserver we use a reducer

 const { bars, addBar, setBars } = useReserver(reserverReducer, [])   

useReserver is a the hook. reserverReducer is the reducer.

The hook returns:

bars which is an array of objects representing the bars
addBar a function which takes a single object to add to the array
setBars a function which sets all the bars

There are more functions returned from the hook. We will start with these.

mouseDownCell={(props) => {
            const newbar = createBar(props.dimension, props.cell);
            addBar(newbar)
        }}

mouseDownCell is the onMouseDown for all each cell. The prop parameter receives the dimension of the cell and the location in the object cell

cell: { row: r, column: c }
 

The objects dimension and cell get passed to the function createBar

createBar is a helper function that takes dimension and cell as arguments and returns an object containing a new id, the dimension, editing as a boolean set to true, the location which is the cell. All these get passed as props into the bar and are necessary as basic properties for the bars array.

addBar is a function that takes an object representing bar and adds it to the array bars.

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

mouseEnterCell takes a function that runs when the mouse enters a cell

resizeBar is a function that takes all bars and the props and calculates the new size of the bars that have the property editing = true.

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

mouseUpCell takes a function that runs on mouse up on a cell Here, the bars are mapped over and all the edited bars that have true on editing becomes false. The other option is to just use finishEditingBars

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

The children of the Reserver component are an array of the component Bar.

getPosition is a helper function that takes the row, column and dimension and calculates the absolute position (top and left) of the bar and passes it into style.

cellClassName is the className that is passed to all cells. by default it is empty so if you dont add a style it will be invisible

Thats it! Thats the most basic code that allows you to run the example.

caution

This is not the best way to use Reserver. Its only an example to simplify the process of getting started.

tip

Go to Basic++ to see a more robust example of how to use Reserver

tip

The code#

caution

tip

The code