https://github.com/derrickpelletier/react-download-svg
Decorate an SVG so you can download it
https://github.com/derrickpelletier/react-download-svg
react svg
Last synced: about 1 month ago
JSON representation
Decorate an SVG so you can download it
- Host: GitHub
- URL: https://github.com/derrickpelletier/react-download-svg
- Owner: derrickpelletier
- License: mit
- Created: 2016-09-07T22:24:08.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-03T05:59:44.000Z (over 7 years ago)
- Last Synced: 2024-10-12T23:37:52.320Z (6 months ago)
- Topics: react, svg
- Language: JavaScript
- Size: 9.77 KB
- Stars: 16
- Watchers: 3
- Forks: 7
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-download-svg
Use `react-download-svg` to decorate an SVG component/element, and when triggered, will download a serialized PNG at a desired size.
## Features
- ...
------
### Example with Trigger helper
`` listens to an event from ``, meaning you can import the trigger elsewhere in your application, no need to have them directly connected. Unique event names can be used if you need to avoid collisions.
```javascript
import {
Wrapper,
Trigger
} from 'react-download-svg';
const SomeComponent = React.createComponent({
render: function () {
return (
Click to download
);
}
});
```
### Example with refs
To initiate a download without using the ``, you can hit the `startDownload()` method directly if you're using a `ref`.
```javascript
import {
Wrapper
} from 'react-download-svg';
const SomeComponent = React.createComponent({
handleClick: function () {
ReactDOM.findDOMNode(this.wrapper).startDownload({
width: 400,
height: 400,
filename: 'somefile.png'
});
},
render: function () {
return (
this.wrapper = n}>
Click to download
);
}
});
```
## Props
### Wrapper
| prop | default | |
|---|---|---|
| `filename` | String: `'untitled.png'` | Sets the filename on the downloaded file. |
| `listenFor` | String: `'downloadSvg'` | Sets the event name to listen for from the ``. Must be the same as set on desired `` instance. |
### Wrapper
| prop | default | |
|---|---|---|
| `filename` | String: `'untitled.png'` | Sets the filename on the downloaded file. This takes priority over the filename on the `` if one is set there as well. |
| `eventName` | String: `'downloadSvg'` | Sets the event name to send to ``. Must be the same as set on desired `` instance. |
| `width` | Number: `400` | The desired width of the png |
| `height` | Number: `400` | The desired height of the png |
| `component` | `'button'` | Defaults to a button instance, otherwise use a valid element type or a react component. |
```