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'],

The components use React hooks (useEffect, useRef), so under the Next.js App Router they must be rendered from a Client Component — either mark your wrapper file with 'use client' at the top, or import them from a wrapper that does.

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', // e.g. 'malstadur'
            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.

Host integration and layout

The component fills the height of its parent slot — .netskrafl-inner (and the .netskrafl / .gatadagsins wrappers) all use height: 100%. The host application must therefore hand it a parent with a definite height; otherwise the component collapses to zero height and renders nothing.

A typical Next.js App Router layout that satisfies this contract:

// app/layout.tsx
<body className='h-screen'>
    <div className='flex h-screen flex-col'>
        <SiteHeader />
        <main className='flex-1 overflow-y-auto'>
            {children}
        </main>
    </div>
</body>

// app/netskrafl/page.tsx
export default function Page() {
    return (
        <div className='flex flex-1 flex-col'>
            <div className='flex h-full grow justify-center'>
                <NetskraflClientWrapper />
            </div>
        </div>
    );
}

The flex-1 / h-full chain propagates the viewport height down to .netskrafl-inner so it sizes itself to exactly the slot the host allocates — no clipping at the bottom of the action buttons, no unwanted vertical scrolling inside the host's content area.

Tunable CSS variables

The host stylesheet may set the following on :root (or any ancestor of the component) to fine-tune internal layout:

| Variable | Default | Purpose | |----------|---------|---------| | --header-size | 40px | Height of the host's header bar; subtracted from the move-list and tab-panel heights so they don't overflow the host slot on mobile portrait. |

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

# 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.