+
+ );
+};
+```
-Import the relevant SketchField component and use it, you can find more on the examples folder of the project
+The default export of 0.5.x keeps working. It is the component, which also carries `SketchField` and
+`Tools`:
-```javascript
-import {SketchField, Tools} from 'react-sketch';
+```jsx
+import Sketch from "react-sketch";
+
+export const Drawing = () =>
-
-
-
-
-
- Sketch Tool
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- (this._sketch = c)}
- lineColor={this.state.lineColor}
- lineWidth={this.state.lineWidth}
- fillColor={
- this.state.fillWithColor ? this.state.fillColor : "transparent"
- }
- backgroundColor={
- this.state.fillWithBackgroundColor
- ? this.state.backgroundColor
- : "transparent"
- }
- width={this.state.controlledSize ? this.state.sketchWidth : null}
- height={this.state.controlledSize ? this.state.sketchHeight : null}
- defaultValue={dataJson}
- value={controlledValue}
- forceValue
- onChange={this._onSketchChange}
- tool={this.state.tool}
- />
-
-
-
-
- this.setState({ expandTools: !this.state.expandTools })
- }>
-
-
-
-
-Line Weight
- this.setState({ lineWidth: v })}
- />
-
- -
-
-
-
-
- this.setState({
- expandControls: !this.state.expandControls,
- })
- }>
-
-
-
-
-
-
-
- this.setState({ expandColors: !this.state.expandColors })
- }>
-
-
-
-
- this.setState({ lineColor: color.hex })}
- />
-
-
-
- this.setState({
- fillWithColor: !this.state.fillWithColor,
- })
- }
- />
- }
- label="Fill"
- />
- this.setState({ fillColor: color.hex })}
- />
-
-
-
-
-
- this.setState({ expandBack: !this.state.expandBack })
- }>
-
-
-
- this.setState({
- fillWithBackgroundColor: !this.state
- .fillWithBackgroundColor,
- })
- }
- />
- }
- />
-
- this.setState({ backgroundColor: color.hex })
- }
- />
-
-
- -
-
- this.setState({ stretched: !this.state.stretched })
- }
- />
- }
- />
-
- this.setState({ stretchedX: !this.state.stretchedX })
- }
- />
- }
- />
-
- this.setState({ stretchedY: !this.state.stretchedY })
- }
- />
- }
- />
-
-
-
-
-
- this.setState({ expandImages: !this.state.expandImages })
- }>
-
-
-
- -
-
-
-
-
- this.setState({
- expandControlled: !this.state.expandControlled,
- })
- }>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
- -
- this._sketch.zoom(1.25)}>
-
- this._sketch.zoom(0.8)}>
-
-
-
-
-
- this.setState({ text: e.target.value })}
- value={this.state.text}
- />
-
-
-
-
-
-
-
-
-
-
- this.setState({
- controlledSize: !this.state.controlledSize,
- })
- }
- />
- }
- label="Control size"
- />
-
-Change Canvas Width
- this.setState({ sketchWidth: v })}
- />
-
-Change Canvas Height
- this.setState({ sketchHeight: v })}
- />
-
-
- -
-
-
-
-
- {
- this._sketch.copy();
- this._sketch.paste();
- }}>
-
-
-
-
-
-
- -
-
-
-
- -
-
-
- Try dropping an image here,
-
- or click -
- to select image as background. -
-
- - or click -
- to select image as background. -
- this.setState({ imageUrl: e.target.value })}
- value={this.state.imageUrl}
- />
-
-
- - -
-
-
- {/* Sketch area */}
-
-
-
- | Name | Type | Argument | Default | Description |
| format | String | the imageFormat property, then png | The format of the output image. Either "jpeg" or "png" | |
| quality | Number | 1 | Quality level (0..1). Only used for jpeg. | |
| multiplier | Number | 1 | Multiplier to scale by | |
| left | Number | Cropping left offset. Introduced in v1.2.14 | ||
| top | Number | Cropping top offset. Introduced in v1.2.14 | ||
| width | Number | Cropping width. Introduced in v1.2.14 | ||
| height | Number | Cropping height. Introduced in v1.2.14 |
(this.containerEl = elem)}>
-