@benjeau/react-native-draw-extras NPM

@benjeau/react-native-draw-extras

Extra components to complement @benjeau/react-native-draw:

CanvasControls
- Clear drawing
- Undo last path
- Includes the BrushPreview component
- Toggle between drawing and erasing
- Toggle visibility of BrushProperties
BrushPreview
- Displays an SVG preview of the stroke (color, thickness, opacity)
BrushProperties
- Includes the ColorPicker component
- Slider to change brush opacity
- Slider to change brush size
ColorPicker
- Grid of color where the user can select a color

npm install @benjeau/react-native-draw-extras
# or
yarn add @benjeau/react-native-draw-extras

Also, you need to install @react-native-community/slider and react-native-svg, and follow their installation instructions.

Please see the example Expo application showcasing the components

Contains all the props of BrushProperties and the following:

name	description	type	default
`onClear`	Callback when the clear button is pressed	`() => void`	-
`onUndo`	Callback when the undo button is pressed	`() => void`	-
`onToggleEraser`	Callback when the eraser button is pressed	`() => void`	-
`onToggleBrushProperties`	Callback when the brush properties button is pressed	`() => void`	-
`buttonStyle`	Override the style of the buttons	`StyleProp<ViewStyle>`	-
`tool`	Initial tool of the canvas	`brush` or `eraser`	-
`deleteButtonColor`	Delete button color	`string`	`#81090A`
`otherButtonsColor`	Other buttons color (undo and eraser mode toggle)	`string`	`#DDD`

name	description	type	default
`color`	Color of the brush strokes	`string`	- (required)
`thickness`	Thickness of the brush strokes	`number`	- (required)
`opacity`	Opacity of the brush strokes	`number`	- (required)
`brushPreview`	Brush preview preset, for different kinds of previews	`stroke` or `dot` or `none`	- (required)

Contains all the props of ColorPicker and the following:

name	description	type	default
`thickness`	Thickness of the brush strokes	`number`	`3`
`opacity`	Opacity of the brush strokes	`number`	`1`
`onThicknessChange`	Callback when brush size is changed via the slider	`(newThickness: number) => void`	-
`onOpacityChange`	Callback when brush opacity is changed via the slider	`(newOpacity: number) => void`	-
`opacityStep`	Step value of the opacity slider, should be between 0 and 1	`number`	`0.1`
`thicknessMin`	Minimum value of the thickness slider	`number`	`5`
`thicknessMax`	Maximum value of the thickness slider	`number`	`35`
`thicknessStep`	Step value of the thickness slider, should be between `props.thicknessMin` and `props.thicknessMax`	`number`	`1`
`sliderColor`	Slider color	`string`	`#000`
`style`	Style of the container	`StyleProp<ViewStyle>`	-

name	description	type	default
`color`	Brush color, one from the colors provided	`string`	- (required)
`onColorChange`	Callback when a color is selected	`(newColor: string) => void`	- (required)
`colors`	Color picker colors, specifying the color picker sections each containing rows of colors. First array defines the sections, second one defines the rows, and the last one defines the columns.	`string[][][]`	`DEFAULT_COLORS`
`style`	Style of the container	`StyleProp<ViewStyle>`	-

If you want to know if a color is bright or not, isBright() is available to detect if a HEX color is bright or dark.

See the contributing guide to learn how to contribute to the repository and the development workflow.

MIT

2 years ago

2 years ago

2 years ago

2 years ago