sanity-qr-code-generator
v1.1.0
Published
QR code generator component for the Sanity v3
Downloads
45
Maintainers
Readme
Sanity QR Code Generator Plugin (for Sanity Studio v3)
Installation
To install this plugin, use the following command:
npm install sanity-qr-code-generator
Usage
To use this plugin, add it as a plugin to your sanity.config.ts
(or .js) file, as shown in the example below:
import { defineConfig } from "sanity";
import { QRCodeGenerator } from "sanity-qr-code-generator";
export default defineConfig({
plugins: [QRCodeGenerator()],
});
Then you can use qrCode
as a custom type in your schemas.
defineField({
title: "Generate your QR code",
name: "qrCode",
type: "qrCode",
});
Configuration
By default, a rendered field will ask to provide a value which has to be encoded in the QR code. But if you want to provide that value automatically, define the dependOn option. That option accepts a document's field name which value should be encoded.
defineField({
title: "Generate your QR code",
name: "qrCode",
type: "qrCode",
options: {
dependOn: "slug",
},
});
You can refer only to fields of the document where QR code field is defined.
If you want to depend on a property of some inner object, provide an array with property names which can lead to the wanted value.
defineField({
title: "Generate your QR code",
name: "qrCode",
type: "qrCode",
options: {
dependOn: ["someObject", "propertyOfSomeObject"],
},
});
Additionally, you can configure the size, background and foreground colours of the code image and its level.
defineField({
title: "Generate your QR code",
name: "qrCode",
type: "qrCode",
options: {
size: 400, // px. Default is 500
level: "H", // Default is "L". Allowed values are "L" | "M" | "H" | "Q"
bgColor: "#e3ea15", // Default is #FFFFFF
fgColor: "#111111", // Default is #000000
},
});
Example
- The plugin requires manually entering a value to encode.
- The plugin automatically gets a value from the document.
Word from author
Have fun ✌️