Skip to content

Commit 50688d3

Browse files
vinothpandianvinothpandian
committed
update README and changelog
1 parent 306ac7c commit 50688d3

File tree

3 files changed

+58
-59
lines changed

3 files changed

+58
-59
lines changed

‎CHANGELOG.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,22 @@
11
## Changelog
22

3+
## [6.0.0]
4+
5+
## Added
6+
7+
- Upgraded all dependencies
8+
- Updated directory structure
9+
- Added background image rendering directly in SVG
10+
- Added option to export background image while exporting the canvas as image or SVG
11+
- Added background image aspect ratio control
12+
- Updated erase option to use mask instead of canvas color
13+
- Add github action for deployment of storybook and package
14+
15+
## Breaking changes
16+
17+
- Removed background option to set background image using CSS-in-JS (instead check feature-filled backgroundImage prop)
18+
19+
320
## [5.3.4]
421

522
## Added

‎README.md‎

Lines changed: 24 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,12 @@ yarn add react-sketch-canvas
5555
Common usage example
5656

5757
```javascript
58-
import React from "react";
59-
import { ReactSketchCanvas } from "react-sketch-canvas";
58+
import React from 'react';
59+
import { ReactSketchCanvas } from 'react-sketch-canvas';
6060

6161
const styles = {
62-
border: "0.0625rem solid #9c9c9c",
63-
borderRadius: "0.25rem",
62+
border: '0.0625rem solid #9c9c9c',
63+
borderRadius: '0.25rem',
6464
};
6565

6666
const Canvas = () => {
@@ -124,52 +124,30 @@ const Canvas = class extends React.Component {
124124

125125
## List of Props
126126

127-
| Props | Expected datatype | Default value | Description |
128-
| -------------------- | ----------------- | ------------- | -------------------------------------------------------------------- |
129-
| className | PropTypes.string | "" | Class for using with CSS selectors |
130-
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
131-
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
132-
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
133-
| background | PropTypes.string | '' | Set SVG background using CSS [background][css-bg] value |
134-
| strokeColor | PropTypes.string | black | Pen color |
135-
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
136-
| eraserWidth | PropTypes.number | 8 | Erase size |
137-
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
138-
| onUpdate | PropTypes.func | all | Returns the current sketch path in `CanvasPath` type on every update |
139-
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
127+
| Props | Expected datatype | Default value | Description |
128+
| ---------------------------------- | ----------------- | ------------- | --------------------------------------------------------------------------------------------------- |
129+
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
130+
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
131+
| className | PropTypes.string | "" | Class for using with CSS selectors |
132+
| strokeColor | PropTypes.string | black | Pen color |
133+
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
134+
| backgroundImage | PropTypes.string | '' | Set SVG background with image URL |
135+
| exportWithBackgroundImage | PropTypes.bool | true | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
136+
| preserveBackgroundImageAspectRatio | PropTypes.string | none | Set aspect ratio of the background image. For possible values check [MDN docs][preserveaspectratio] |
137+
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
138+
| eraserWidth | PropTypes.number | 8 | Erase size |
139+
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
140+
| onUpdate | PropTypes.func | all | Returns the current sketch path in `CanvasPath` type on every update |
141+
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
142+
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
140143

141144
Set SVG background using CSS [background][css-bg] value
142145

143146
You can specify width and height values in em or rem. It fills the parent element space if width and height are not set
144147

145-
Example
146-
147-
```javascript
148-
<ReactSketchCanvas width="25em" height="10rem" />
149-
```
150-
151-
## Styling
152-
153-
You can pass a CSS in JS style object to style the element. By default it has a border with following properties
148+
<br />
154149

155-
```css
156-
canvas {
157-
border: 0.0625rem solid #9c9c9c;
158-
border-radius: 0.25rem;
159-
}
160-
```
161-
162-
Example
163-
164-
```javascript
165-
<ReactSketchCanvas
166-
style={{
167-
border: "0.0625rem solid #9c9c9c",
168-
}}
169-
/>
170-
```
171-
172-
## Functions
150+
## Methods
173151

174152
You can export the sketch as an image or as a svg
175153

@@ -191,7 +169,7 @@ _Use ref to access the element and call the following functions to export image_
191169
## Types
192170

193171
```ts
194-
type ExportImageType = "jpeg" | "png";
172+
type ExportImageType = 'jpeg' | 'png';
195173

196174
interface Point {
197175
x: number;
@@ -216,10 +194,10 @@ interface CanvasPath {
216194
- Draws smooth curves, thanks to François Romain's [tutorial][smooth-curve-tutorial]
217195
- Immer [link][immer]
218196

219-
220197
---
221198

222199
[based-on]: https://pspdfkit.com/blog/2017/how-to-build-free-hand-drawing-using-react/
223200
[smooth-curve-tutorial]: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
224201
[css-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background
225202
[immer]: https://immerjs.github.io/immer/docs/introduction
203+
[preserveaspectratio]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

‎libs/react-sketch-canvas/src/stories/0.demo.stories.mdx‎

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -113,19 +113,22 @@ const Canvas = class extends React.Component {
113113

114114
## List of Props
115115

116-
| Props | Expected datatype | Default value | Description |
117-
| -------------------- | ----------------- | ------------- | -------------------------------------------------------------------- |
118-
| className | PropTypes.string | "" | Class for using with CSS selectors |
119-
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
120-
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
121-
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
122-
| background | PropTypes.string | '' | Set SVG background using CSS [background][css-bg] value |
123-
| strokeColor | PropTypes.string | black | Pen color |
124-
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
125-
| eraserWidth | PropTypes.number | 8 | Erase size |
126-
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
127-
| onUpdate | PropTypes.func | all | Returns the current sketch path in `CanvasPath` type on every update |
128-
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
116+
| Props | Expected datatype | Default value | Description |
117+
| ---------------------------------- | ----------------- | ------------- | --------------------------------------------------------------------------------------------------- |
118+
| width | PropTypes.string | 100% | canvas width (em/rem/px) |
119+
| height | PropTypes.string | 100% | canvas width (em/rem/px) |
120+
| className | PropTypes.string | "" | Class for using with CSS selectors |
121+
| strokeColor | PropTypes.string | black | Pen color |
122+
| canvasColor | PropTypes.string | white | canvas color (HTML colors) |
123+
| backgroundImage | PropTypes.string | '' | Set SVG background with image URL |
124+
| exportWithBackgroundImage | PropTypes.bool | true | Keep background image on image/SVG export (on false, canvasColor will be set as background) |
125+
| preserveBackgroundImageAspectRatio | PropTypes.string | none | Set aspect ratio of the background image. For possible values check [MDN docs][preserveaspectratio] |
126+
| strokeWidth | PropTypes.number | 4 | Pen stroke size |
127+
| eraserWidth | PropTypes.number | 8 | Erase size |
128+
| allowOnlyPointerType | PropTypes.string | all | allow pointer type ("all"/"mouse"/"pen"/"touch") |
129+
| onUpdate | PropTypes.func | all | Returns the current sketch path in `CanvasPath` type on every update |
130+
| style | PropTypes.object | false | Add CSS styling as CSS-in-JS object |
131+
| withTimestamp | PropTypes.bool | false | Add timestamp to individual strokes for measuring sketching time |
129132

130133
Set SVG background using CSS [background][css-bg] value
131134

@@ -186,3 +189,4 @@ interface CanvasPath {
186189
[smooth-curve-tutorial]: https://medium.com/@francoisromain/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74
187190
[css-bg]: https://developer.mozilla.org/en-US/docs/Web/CSS/background
188191
[immer]: https://immerjs.github.io/immer/docs/introduction
192+
[preserveaspectratio]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

0 commit comments

Comments
 (0)