React Bezier Curve Editor

Customizable React Bezier Curve editor for easings and more. Default styling inspired by cubic-bezier

Usage

import { BezierCurveEditor } from 'react-bezier-curve-editor';

<BezierCurveEditor />

Props

Name	Description	Default value
size	This defines the width and the height of the control.	200
	The final width/height of the component will be slightly larger because of the outerAreaSize and spacings
outerAreaSize	The extra height above and below the editor. This is necessary for creating elastic curves	50
outerAreaColor	The background color of the outer area	#fafafa
innerAreaColor	The background color of the actual editor area	#ffffff
rowColor	The background color of the rows in the editor area	#f2f2f2
strokeWidth	The width of the bezier curve stroke	2
curveLineColor	The stroke color of the bezier curve	#000
fixedHandleColor	The background color of the curve fixed curve handle colors (start and end point)	#fff
handleLineColor	The stroke color of the handle lines. This also affects the stroke of the fixed handles	#969696
startHandleColor	The color of the start point curve handle	#f08
endHandleColor	The color of the end point curve handle	#0ab
startHandleClassName	The className of the start handle
startHandleActiveClassName	Class to apply for active state of start handle
endHandleClassName	The className of the end handle
endHandleActiveClassName	Class to apply for active state of end handle
fixedPointActiveClassName	Class to apply for active state of fixed points
value	The current bezier curve value	[.4,0,1,.6]
onChange	The onChange handler (takes bezier curve value array as parameter)
allowNodeEditing	Whether or not the left and right nodes can be moved by the user	false

Theming

Theming can be done by either overriding the class names or the CSS variables. Below is a list of the CSS variables used:

:root {
  --bce-sizes-curve-handle: 16px;
  --bce-padding-sm: 4px;
  --bce-padding-md: 8px;
  --bce-padding-lg: 12px;
  --bce-padding-xl: 16px;
  --bce-colors-handle-line: #969696;
  --bce-colors-curve-line: black;
  --bce-colors-row: #f2f2f2;
  --bce-colors-background: white;
  --bce-colors-outerarea: #fafafa;
  --bce-colors-axisline: black;
  --bce-colors-handle-fixed: white;
  --bce-colors-handle-start: #f08;
  --bce-colors-handle-end: #0ab;
  --bce-colors-preview: white;
  --bce-colors-preview-border: black;
  --bce-colors-handle-active-shadow: rgba(255, 255, 255, 0.7);
}

Accessibility

For now, this library doesn't handle the accessibility in any special way intentionally. Google Chrome has zero support for screen readers in Bezier curve editors in the developer tools, which was our only idea for how to model this component for a11y.

At present, we would suggest that you provide a toggle-able alternative experience for keyboard users as well as users who don't have access to a fine pointer device.