InputScannerTextQr

El componente InputScannerTextQr combina un campo de texto con un escáner QR. Permite al usuario ingresar texto manualmente o escanear un código QR para rellenar el campo de texto.

Ejemplo

Importación

Para importar el componente InputScannerTextQr, se puede hacer desde fenextjs

import { InputScannerTextQr } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
className	string	no	''	Clase CSS para personalizar el contenedor principal del componente.
defaultValue	string	no	''	Valor predeterminado del campo de texto.
onChange	(value: string) => void	no	undefined	Función que se ejecuta cuando el valor del campo de texto cambia, pasando el nuevo valor.
icon	ReactNode	no	undefined	Ícono que se muestra junto al campo de texto, en este caso, el escáner QR.
onChangeCameraContent	ReactNode	no	<CameraChange />	Contenido personalizado para el botón que permite cambiar entre cámaras en el escáner QR.
buttonToggleFlashContent	ReactNode	no	<Bolt />	Contenido personalizado para el botón que activa o desactiva el flash de la cámara en el escáner QR.
buttonScannerContent	ReactNode	no	<Qr />	Contenido personalizado para el botón que activa el escáner QR.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Escáner de texto y QR básico

<InputScannerTextQr onChange={(value) => console.log(value)} />

Escáner de texto y QR con valor predeterminado

<InputScannerTextQr
  defaultValue="Texto inicial"
  onChange={(value) => console.log(value)}
/>

Escáner de texto y QR con icono personalizado

<InputScannerTextQr icon={<div>Escanear QR</div>} />

Qr Base