score:4
i figured out how to do it, here is the code:
import qrcode from 'qrcode.react';
constructor(props) {
super(props);
this.download = this.download.bind(this);
}
componentdidmount(){
this.download()
}
render() {
return (
<div style={{display: "none"}} classname="hpqrcode"> // hidden div
<qrcode
value={this.state.values._id}
size={128}
level={'h'}
/>
</div>
<a ref={(ref: any): any => this.downloadref = ref}>
download qr code
</a>
)};
download() {
const canvas: any = document.queryselector('.hpqrcode > canvas');
this.downloadref.href = canvas.todataurl();
this.downloadref.download = this.state.values.deviceid + "-qr.png";
}
Source: stackoverflow.com
Related Query
- Make generated QR code downloadable on react project
- How to make vs code autocomplete React component's prop types?
- React + backend - project structure when sharing code
- How to make React Create App Production Error Boundary map to source code
- Programatically make the index.html from a React project to include the version number from package.json
- Adding Heap Analytics code in React Project
- How do I make this custom generated table editable? Made it using Ag-grid react
- Sharing code between a Typescript React project and a Typescript Express project
- Failed with code 405 when using axios to make a call to controller api in asp.net core react application
- How to enable import autocomplete without typescript checking in a React project in VS Code
- How do I make ESlint less stringent while working with Prettier in a React project (with Material-UI)?
- How to use openAPI generated typescript code in react app?
- Displaying a block of code in react project
- I have a 400 code on POST request in react hook project
- Is there a way to run a linter on a React project every time the code is saved?
- Can I make my React project work completely offline?
- How to code split packages (fontawesome) from Webpack 4 React project
- react state changing state to make code from visible to hidden
- How do I write a code to make a function run randomly every 10 minutes in react js
- How can I execute my code after data load is finished on my react project
- How do I use react custom hooks to make code reusable
- React on click add class to dynamically generated element to make it active
- npm ERR! code ERR_SOCKET_TIMEOUT on creating new React project when using npx create-react-app
- How i implement some props to make my code cleaner on react js?
- Code - Pen Issues: why does my cellular automata react project not work?
- How to make my import react Calendar project english only?
- How could I make this code more React - like
- How can I make React popup notification kind of code
- Can we add Html id to React code and make a condition
- Make React useEffect hook not run on initial render
More Query from same tag
- Error: Too many re-renders. React limits the number of renders to prevent an infinite loop. Even with arrow functions used
- Why my react-bootstrap modal component displays like that?
- Github API Not displaying users
- DRY react Code multiple similar functions
- reactjs props getting lost in Route creation
- React Route Home Page and Admin Page
- Reactsjs Hide button on certain paths
- Send props to react component from redirect
- How to set nextjs router query parameter
- aws-amplify-react and nextjs breaks my user context
- Tracking URL changes with React Hooks
- Enable auto (self)-closing tags for JSX in MDX file
- Getting Parse Error <this.props.activeRouteHandler/>
- React: Nothing was returned from render. This usually means a return statement is missing
- Setup Airbrake-js with a ReactJS app and webpack
- Chrome developer tools sources not showing source files
- How to change component that is rendered?
- handle multiselect case on selecting and deselecting button/component
- How to get the returned data from a smart contract function using ethers.js?
- Image and text side by side in div, want to shrink image on resize
- Sort desc on date and if tie then on risk in javascript array
- How correct use swiperjs breakpoints with React jsx file?
- Trigger useEffect in Jest and Enzyme testing
- How do i load my React component conditionally?
- Draft.js cannot insert uploaded image from external form
- How to create deterministic styles when using createStyles()
- Mapping Object React -> Issue with Keys
- How can I use React Material UI's transition components to animate adding an item to a list?
- material ui border color overwriting the texbox
- Undefined attribute inside an event handler