rfid-input.md

RfidInput

Source

A component to take in an RFID signal.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { RfidInput } from 'chayns-components';

// ...

<RfidInput {...} />

Props

The RfidInput-component takes the following props:

Name	Type	Default	Required
className	string
style	{ [key: string]: string | number }
placeholder	string	'Kartennummer'
confirmNode	ReactNode | Array<ReactNode>	'OK'
enableScan	boolean	false
scanText	string	'Scannen'
value	string		✓
onInput	function		✓
onConfirm	function		✓

className

className?: string

A classname string that will be applied to the container element.

---

style

style?: { [key: string]: string | number }

A React style object that will be applied to the container element.

---

placeholder

placeholder?: string

A string that will be shown as the placeholder.

---

confirmNode

confirmNode?: ReactNode | Array<ReactNode>

A string or ReactNode that will be the content of the confirm button.

---

enableScan

enableScan?: boolean

Wether to enable the scan-button for scanning a card.

---

scanText

scanText?: string

A string that will be the content of the scan-button.

---

value

value: string;

The input value.

---

onInput

onInput: function

A callback for when the <input>-elements content changes.

---

onConfirm

onConfirm: function

This will be called when the RFID input is completed and validated.