netskrafl-react

A React front end for Netskrafl, packaged as a React component library.

Components

This library provides two main components:

• Netskrafl - The full multiplayer crossword game
• GataDagsins - A daily crossword riddle ("Riddle of the Day")

Both components are responsive and mobile-friendly.

Installation

npm install @mideind/netskrafl-react

Requires React 18+. This package is distributed as ESM only.

If using Next.js, add the package to transpilePackages in next.config.ts:

transpilePackages: ['@mideind/netskrafl-react'],

Usage

Import the component, its styles, and optionally the props type:

import { Netskrafl } from '@mideind/netskrafl-react';
import type { INetskraflProps } from '@mideind/netskrafl-react';
import '@mideind/netskrafl-react/style.css';

function App() {
    const props: INetskraflProps = {
        state: {
            serverUrl: 'https://your-netskrafl-server.is',
            userEmail: '[email protected]',
            userNick: 'User',
            userFullname: 'Example User',
            token: 'jwt-auth-token',
            plan: 'friend',
            hasPaid: true,
            // Firebase configuration
            projectId: 'netskrafl',
            firebaseApiKey: '...',
            firebaseAppId: '...',
            firebaseSenderId: '...',
            databaseUrl: 'https://your-netskrafl.firebaseio.com',
            measurementId: '...',
            // Optional
            loginMethod: 'myapp',
            subscriptionUrl: '/subscribe',
        },
        tokenExpired: async () => {
            // Called when the auth token expires.
            // Fetch a new JWT and return it, or return undefined on failure.
            const res = await fetch('/api/token', { method: 'POST' });
            const data = await res.json();
            return data.jwt;
        },
    };
    return <Netskrafl {...props} />;
}

For Gáta Dagsins, the usage is identical except for the component name:

import { GataDagsins } from '@mideind/netskrafl-react';
import '@mideind/netskrafl-react/style.css';

function App() {
    return <GataDagsins state={{ /* same shape */ }} tokenExpired={...} />;
}

Props

Both components accept INetskraflProps:

| Prop | Type | Description | |------|------|-------------| | state | Partial<GlobalState> | Configuration and user state (see below) | | tokenExpired | () => Promise<string \| undefined> | Optional callback invoked when the auth token expires; should return a fresh JWT |

State fields

The state prop is a partial GlobalState object. Commonly used fields:

| Field | Type | Description | |-------|------|-------------| | serverUrl | string | Base URL of the Netskrafl backend server | | userEmail | string | User's email address | | userNick | string | User's short display name | | userFullname | string | User's full display name | | token | string | JWT authentication token for API requests | | plan | string | Subscription plan identifier (e.g. 'friend') | | hasPaid | boolean | Whether the user has an active subscription | | loginMethod | string | Identifies the host application (e.g. 'malstadur') | | subscriptionUrl | string | URL to redirect users for subscription management | | projectId | string | Firebase project ID | | firebaseApiKey | string | Firebase API key | | firebaseAppId | string | Firebase app ID | | firebaseSenderId | string | Firebase messaging sender ID | | databaseUrl | string | Firebase Realtime Database URL | | measurementId | string | Firebase Analytics measurement ID | | movesUrl | string | URL of the moves microservice | | movesAccessKey | string | Access key for the moves microservice | | locale | string | UI language ('is' for Icelandic, 'en_US' for English) | | runningLocal | boolean | Set to true in development environments | | userGroupId | string? | Optional group identifier for Gáta Dagsins leaderboards |

All fields are optional (the state is Partial<GlobalState>), but the components need at minimum serverUrl, userEmail, token, and the Firebase configuration fields to function.

Features

• Drag-and-drop tile placement with touch support
• Click-to-select tile placement
• Keyboard tile placement (type letters to place tiles)
• Real-time game updates via Firebase
• Mobile-responsive design
• Pinch-to-zoom on mobile (pinch to zoom out, spread to zoom in)
• Double-tap to zoom out on mobile
• Auto-zoom when placing tiles on the board

Architecture

The components are written in TypeScript. They assume that the containing application handles user authentication and subscription status.

The code uses a hybrid React-Mithril architecture: the components are React wrappers around Mithril UI code. Modifying the components requires familiarity with both frameworks, though Mithril is straightforward and arguably simpler than React.

The components communicate with the Netskrafl backend server via a JSON API over HTTPS, and use Firebase for real-time updates.

Backend

The Netskrafl backend server code is available at github.com/mideind/Netskrafl. The backend is written in Python using the Flask web framework.

Development

# Install dependencies
npm install

# Run rollup in watch mode
npm run watch

# Run Storybook for development/testing
npm run storybook

# Build for production
npm run rollup

# Build CSS only (faster, for CSS-only changes)
npm run css

# Type-check
npx tsc --noEmit

# Lint
npx @biomejs/biome check src/

License

Copyright © 2026 Miðeind ehf. Original author: Vilhjálmur Þorsteinsson.

Released under the CC-BY-NC 4.0 license. See the LICENSE file for details.