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.

Usage

Import the component and its styles:

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

function App() {
    return (
        <Netskrafl
            state={{
                userEmail: '[email protected]',
                userFullName: 'Example User',
                userId: 'unique-user-id',
                firebaseToken: 'firebase-auth-token',
                subscriber: true,
                locale: 'is',
                urlPrefix: 'https://netskrafl.is',
            }}
        />
    );
}

For Gáta Dagsins:

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

function App() {
    return (
        <GataDagsins
            state={{
                userEmail: '[email protected]',
                userFullName: 'Example User',
                userId: 'unique-user-id',
                firebaseToken: 'firebase-auth-token',
                subscriber: true,
                locale: 'is',
                urlPrefix: 'https://netskrafl.is',
            }}
        />
    );
}

Props

| Prop | Type | Description | |------|------|-------------| | userEmail | string | User's email address | | userFullName | string | User's display name | | userId | string | Unique user identifier | | firebaseToken | string | Firebase authentication token for real-time updates | | subscriber | boolean | Whether user has full access (subscriber) or limited/free access | | locale | string | UI language ('is' for Icelandic, 'en' for English) | | urlPrefix | string | Base URL of the Netskrafl backend server |

Features

• Drag-and-drop tile placement
• Click-to-select tile placement
• Keyboard tile placement (type letters to place tiles)
• Real-time game updates via Firebase
• Mobile-responsive design with touch support
• Pinch-to-zoom on mobile devices

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

# Type-check
npx tsc --noEmit

# Lint
npx @biomejs/biome check src/

License

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

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