Bar Basics

You will most likely want to have some text or really anything inside the bars you create.

All you have to do is pass in a child to the Bar component

I use a helper component called Tag to help position the text in the bar but it is not required.

import React from 'react'

import Reserver, {

Tag,

Bar,

useReserver,

reserverReducer,

createBar,

getPosition,

resizeBars,

finishEditingBars

} from 'react-reserver'

import styles from './basicexamples.module.css'

import { getRandomColor } from './helpers'

export default function BasicBar(props) {

const { bars, isEditing, setIsEditing, addBar, setBars } = useReserver(

reserverReducer,

[]

)

return (

<Reserver

cellClassName={styles.row_cell}

mouseDownCell={(props) => {

const newbar = createBar(props.dimension, props.cell)

newbar.style = { background: getRandomColor() }

addBar(newbar)

setIsEditing(true)

}}

mouseEnterCell={(props) => {

if (isEditing) {

const nBars = resizeBars(bars, props)

setBars(nBars)

}

}}

mouseUpCell={() => {

const dBars = finishEditingBars(bars)

setBars(dBars)

setIsEditing(false)

}}

>

{({ dimension }) => {

return bars.map((bar) => {

return (

<Bar

key={bar.id}

{...bar}

style={{

...bar.style,

...getPosition(bar.row, bar.column, bar.dimension)

}}

>

<Tag

style={{

color: '#fff',

width: dimension.width * bar.length,

textAlign: 'center'

}}

>

{bar.length} Days

</Tag>

</Bar>

)

})

}}

</Reserver>

)

}

If you notice in the Tag I pass to the style prop the width by multiply the dimension gotten from the parameter by the length. This allows me to position the text in the center regardless of the size of the bar