/react-bezier-curve-editor

Simple bezier curve editor built with React

Primary LanguageTypeScript

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.