use-nfc-hook

A React Hook that wraps the Web NFC api

Live Playground

If you feel like experimenting just grab some of these NFC tags and use the Playground

Features

• NFC (NDEF actually) feature detection.
• NFC permission detection.
• NFC permission change detection.
• Read NFC tag
• Abort Reading operation (uses Abort Controller)
• Automatic re-initialization after (scan start failure, read error, successful reading, reading abortion)
• Write NFC tag
• Make Read only an NFC tag (soon)

Install

npm i use-nfc-hook

Quickstart

import React from 'react';
import { useNfc } from 'use-nfc-hook';

const App = () => {
  const { isNDEFAvailable, permission, read, abortReadCtrl, write } = useNfc()
  
  // decode an NFC tag containing a single record
  const handleRead = async () => {
    try {
      
      const response = await read()

      const record = response.message.records[0]

      const decoder = new TextDecoder('utf-8');

      const decodedContent = decoder.decode(record.data)

      console.log("DECODED CONTENT:", decodedContent);

    } catch (error) {
      console.log("ERROR ", error);
    }
  }
  
  return (
    <>
      {isNDEFAvailable !== undefined && !isNDEFAvailable && (
        <div>Looks like NDEF is not available</div>
      )}
      {isNDEFAvailable && <button
        onClick={handleRead}
        disabled={permission as PermissionState === 'denied'}
      >
        Start Scan
      </button>}
    
    
    {permission}
    </>
  );
}

Development

1. Run rollup with watch flag to watch the /src folder and automatically recompile it into /dist whenever you ake a change.

npm run dev

2. Start the React playground app you have under /playground In another terminal tab

cd playground && npm run start

This way webpack will automatically open your browser, lunch the React playground app and whenever you make a change to /src or /playground it will hot-reload allowing to see the changes in real time.