Skip to content

Commit 4c791c4

Browse files
committed
2 parents 0877ca8 + ab68330 commit 4c791c4

File tree

1 file changed

+7
-7
lines changed

1 file changed

+7
-7
lines changed

README.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,12 @@ npm install --save react-signature-pad-wrapper
1313
This package implements exactly the same interface as the original *signature_pad* and adds a couple of extra features that make responsive behaviour a little easier to deal with. For a complete overview of the available options and callables see the documentation for [signature pad](https://github.com/szimek/signature_pad).
1414

1515
Import the component like (ES6):
16-
```
16+
```javascript
1717
import SignaturePad from 'react-signature-pad-wrapper'
1818
```
1919

2020
Options may be passed as a component property during initialization:
21-
```
21+
```javascript
2222
...
2323
render() {
2424
return <SignaturePad options={{minWidth: 5, maxWidth: 10, penColor: 'rgb(66, 133, 244)'}} />;
@@ -27,15 +27,15 @@ render() {
2727
```
2828

2929
or they can be set during runtime:
30-
```
30+
```javascript
3131
...
3232
render() {
3333
return <SignaturePad ref={ref => this.signaturePad = ref} />;
3434
}
3535
...
3636
```
3737
then from somewhere else in the code (assuming the ref is defined):
38-
```
38+
```javascript
3939
// Call an instance method
4040
this.signaturePad.clear();
4141
this.signaturePad.isEmpty();
@@ -48,7 +48,7 @@ this.signaturePad.penColor = 'rgb(66, 133, 244)';
4848

4949
## Responsiveness
5050
The HTML canvas object sucks when it comes to responsiveness. The approach taken with this plugin is to use a fixed size canvas when a height and width (in pixels) is explicitly passed in as a component property:
51-
```
51+
```javascript
5252
...
5353
render() {
5454
return <SignaturePad width={500} height={500} />;
@@ -57,7 +57,7 @@ render() {
5757
```
5858

5959
If you want the component to be responsive, simply ommit the width and height property:
60-
```
60+
```javascript
6161
...
6262
render() {
6363
return <SignaturePad />;
@@ -67,7 +67,7 @@ render() {
6767
The canvas width and height will now be updated whenever the window is resized (using a debounced handler). Changing the width and height properties of a HTML canvas object will erase its current content.
6868

6969
If you'd like to keep what is currently drawn on the canvas you can pass a `redrawOnResize` property to the component and set it to `true` (`redrawOnResize` is `false` by default):
70-
```
70+
```javascript
7171
...
7272
render() {
7373
return <SignaturePad redrawOnResize={true} />;

0 commit comments

Comments
 (0)