react-scrollable-canvas
react-scrollable-canvas is a React component library that you can create scrollable canvas easily and quickly.
Installation
Install react-scrollable-canvas
with npm:
npm install react-scrollable-canvas --save
Example
;; const WIDTH = 300;const HEIGHT = 300;const LARGE_WIDTH = 600;const LARGE_HEIGHT = 600;const CIRCLE_RADIUS = 5;const CIRCLE_SIZE = 30; canvasRef = ; ctx = null; { // draw canvas here. thisctx; for let y = -scrollTop % CIRCLE_SIZE; y < HEIGHT - scrollTop % CIRCLE_SIZE; y += CIRCLE_SIZE for let x = -scrollLeft % CIRCLE_SIZE; x < WIDTH - scrollLeft % CIRCLE_SIZE; x += CIRCLE_SIZE thisctx; thisctx; thisctxfillStyle = `rgba(, , 128, 0.8)`; thisctx; }; { thisctx = thiscanvasRefcurrent; this; } { return <ScrollableCanvas width=WIDTH height=HEIGHT largeWidth=LARGE_WIDTH largeHeight=LARGE_HEIGHT canvasRef=thiscanvasRef onScroll=thisdraw /> ; }
Props
ScrollableCanvas Props
Name | Type | Description |
---|---|---|
width | number | Required. Width of the display size. |
height | number | Required. Height of the display size. |
largeWidth | number | Required. Width of the canvas size. |
largeHeight | number | Required. Height of the canvas size. |
wait | number | Function onScroll is called every (wait) milliseconds. Used for throttle function. Default value is 10. |
noScrollbar | boolean | Hide scroll bar. Default value is false. |
onScroll | (scrollTop: number, scrollLeft: number) => void | This function is called when scrolled. |
canvasRef | React.RefObject | This references a canvas element inside ScrollableCanvas. |
ScrollableCanvasContainer Props
Name | Type | Description |
---|---|---|
width | number | Required. Width of the display size. |
height | number | Required. Height of the display size. |
largeWidth | number | Required. Width of the canvas size. |
largeHeight | number | Required. Height of the canvas size. |
wait | number | Function onScroll is called every (wait) milliseconds. Used for throttle function. Default value is 10. |
noScrollbar | boolean | Hide scroll bar. Default value is false. |
onScroll | (scrollTop: number, scrollLeft: number) => void | This function is called when scrolled. |
children | React.ReactNode | Children of ScrollableCanvasContainer. |
Canvas Props
Name | Type | Description |
---|---|---|
width | number | Width css property. Default value is 500. |
height | number | Height css property. Default value is 500. |
translateX | number | translateX css property. Default value is 0. |
translateY | number | translateY css property. Default value is 0. |
top | number | top css property. Default value is 0. |
left | number | left css property. Default value is 0. |