Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
svelte-barcode-scanner
Advanced tools
svelte-barcode-scanner - npm Package Compare versions
Comparing version 0.1.3 to 0.1.4
| { | ||
| "name": "svelte-barcode-scanner", | ||
| "repository": "github:ollema/svelte-barcode-scanner", | ||
| "version": "0.1.3", | ||
| "version": "0.1.4", | ||
| "exports": { | ||
@@ -6,0 +6,0 @@ ".": { |
@@ -1,58 +0,58 @@ | ||
| # create-svelte | ||
| # Svelte Barcode Scanner | ||
| Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte). | ||
| A Svelte component for detecting QR-codes, EAN-barcodes and other barcode formats. | ||
| Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging). | ||
| [](https://www.npmjs.com/package/svelte-barcode-scanner) | ||
| [](https://www.npmjs.com/package/svelte-barcode-scanner) | ||
| [](https://github.com/ollema/svelte-barcode-scanner/actions/workflows/ci.yml) | ||
| [](./LICENSE) | ||
| ## Creating a project | ||
| ## Installation | ||
| If you're seeing this, you've probably already done this step. Congrats! | ||
| ```bash | ||
| # create a new project in the current directory | ||
| npm create svelte@latest | ||
| # create a new project in my-app | ||
| npm create svelte@latest my-app | ||
| npm install svelte-barcode-scanner | ||
| ``` | ||
| ## Developing | ||
| or | ||
| Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server: | ||
| ```bash | ||
| npm run dev | ||
| # or start the server and open the app in a new browser tab | ||
| npm run dev -- --open | ||
| pnpm install svelte-barcode-scanner | ||
| ``` | ||
| Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app. | ||
| ## Usage | ||
| ## Building | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { BarcodeScanner } from 'svelte-barcode-scanner'; | ||
| </script> | ||
| To build your library: | ||
| ```bash | ||
| npm run package | ||
| <BarcodeScanner /> | ||
| ``` | ||
| To create a production version of your showcase app: | ||
| The `<BarcodeScanner />` component is responsive and fills the available space with `object-fit: cover`. | ||
| ```bash | ||
| npm run build | ||
| ``` | ||
| This enables you to embed the component inside a div with a fixed aspect ratio to get a predictable size regardless of the aspect ratio of the camera feed: | ||
| You can preview the production build with `npm run preview`. | ||
| ```svelte | ||
| <script lang="ts"> | ||
| import { BarcodeScanner } from 'svelte-barcode-scanner'; | ||
| </script> | ||
| > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment. | ||
| <div class="barcode-scanner"> | ||
| <BarcodeScanner /> | ||
| </div> | ||
| ## Publishing | ||
| <style> | ||
| .barcode-scanner { | ||
| width: 100%; | ||
| max-width: 384px; | ||
| aspect-ratio: 1; | ||
| } | ||
| </style> | ||
| ``` | ||
| Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)). | ||
| A live demo and an API reference is being worked on. | ||
| To publish your library to [npm](https://www.npmjs.com): | ||
| ## License | ||
| ```bash | ||
| npm publish | ||
| ``` | ||
| [MIT](./LICENSE) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-0.41%
19239
No dependency changes