# @luomus/laji-form

> React module capable of building dynamic forms from Laji form json schemas

Latest version **15.1.138** (published 2026-09-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @luomus/laji-form
pnpm add @luomus/laji-form
yarn add @luomus/laji-form
bun add @luomus/laji-form
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 15.1.138 |
| Published | 2026-09-28 |
| First published | 2023-11-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 26 |
| Unpacked size | 6.2 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Olli Raitio |
| Maintainers | olzraiti, mjlumme, merannis, blodir, rpulkka |
| Keywords | react-jsonschema-form, laji-form, luomus |

## Links

- npm: https://www.npmjs.com/package/@luomus/laji-form
- Repository: https://github.com/luomus/laji-form
- Homepage: https://github.com/luomus/laji-form#readme
- Issues: https://github.com/luomus/laji-form/issues
- npm.io page: https://npm.io/package/@luomus/laji-form

## Dependencies (26)

- [react](https://npm.io/package/react.md) ^17.0.2
- [moment](https://npm.io/package/moment.md) ^2.29.1
- [memoizee](https://npm.io/package/memoizee.md) ^0.4.15
- [deepmerge](https://npm.io/package/deepmerge.md) ^4.2.2
- [react-dom](https://npm.io/package/react-dom.md) ^17.0.2
- [@rjsf/core](https://npm.io/package/@rjsf/core.md) ~5.1.0
- [deep-equal](https://npm.io/package/deep-equal.md) ^2.0.5
- [exifreader](https://npm.io/package/exifreader.md) ^4.32.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [@rjsf/utils](https://npm.io/package/@rjsf/utils.md) ~5.1.0
- [@types/react](https://npm.io/package/@types/react.md) ^16.14.10
- [react-spinner](https://npm.io/package/react-spinner.md) ^0.2.7
- [react-widgets](https://npm.io/package/react-widgets.md) ^4.6.1
- [react-dropzone](https://npm.io/package/react-dropzone.md) ^11.3.4
- [@types/memoizee](https://npm.io/package/@types/memoizee.md) ^0.4.8
- [react-inlinesvg](https://npm.io/package/react-inlinesvg.md) ^2.3.0
- [@luomus/laji-map](https://npm.io/package/@luomus/laji-map.md) ^5.1.19
- [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.9.13
- [isomorphic-fetch](https://npm.io/package/isomorphic-fetch.md) ^3.0.0
- [@types/deep-equal](https://npm.io/package/@types/deep-equal.md) ^1.0.1
- [react-sortable-hoc](https://npm.io/package/react-sortable-hoc.md) ^2.0.0
- [immutability-helper](https://npm.io/package/immutability-helper.md) ^3.1.1
- [@rjsf/validator-ajv6](https://npm.io/package/@rjsf/validator-ajv6.md) ~5.1.0
- [@types/react-spinner](https://npm.io/package/@types/react-spinner.md) ^0.2.0
- [react-widgets-moment](https://npm.io/package/react-widgets-moment.md) ^4.0.30
- [@luomus/laji-validate](https://npm.io/package/@luomus/laji-validate.md) ^0.0.132

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 15.1.138 (latest) — 2026-09-28
- 15.1.137 — 2026-09-28
- 15.1.136 — 2026-09-25
- 15.1.135 — 2026-09-23
- 15.1.134 — 2026-09-22
- 15.1.133 — 2026-09-17
- 15.1.132 — 2026-09-14
- 15.1.131 — 2026-09-11
- 15.1.130 — 2026-09-10
- 15.1.129 — 2026-09-02
- 15.1.128 — 2026-09-02
- 15.1.127 — 2026-08-26
- 15.1.126 — 2026-08-26
- 15.1.125 — 2026-08-12
- 15.1.124 — 2026-07-09
- … 126 more at https://npm.io/package/@luomus/laji-form/versions

## README

# README

LajiForm is a dynamic form built on React. It can be used as a standalone library or as a React component. LajiForm is a wrapper for [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form).

# Installing

```
npm install @luomus/laji-form --save
```

If you are going to use the bootstrap 3 theme, you need to install also `react-bootstrap`:

```
npm install react-bootstrap@0.33.1 --save
```

# Usage as a library

LajiForm passes all its properties to react-jsonschema-form. Read the documentation for react-jsonschema-form.

## Usage as a standalone library

```
import LajiForm from "laji-form";

new LajiForm({
  schema: schema,
  uiSchema: uiSchema, formData: formData,
  rootElem: document.getElementById("app")
});
```

You can update the properties with ```setState(props)```. You need to pass only the properties that you are changing, since it just calls the React component's ```setState(props)```.

You can unmount the component with ```unmount()```.

## Usage as a React component

```
import React from "react";
import { render } from "react-dom";
import LajiForm from "laji-form/lib/components/LajiForm";

render(<LajiForm
    schema={...}
    uiSchema={...}
    formData={...} />,
  document.getElementById("app"));
```

## API Client

In addition to properties you would pass to &lt;Form /&gt;, you must pass an api client implementation, if you need to use fields that use lajitest.api.fi. The api client implementation must have ```fetch()``` -method, which **returns a Promise**.

```fetch(path, query, options)``` parameters are as follows:

* **path:** URL path for GET.
* **query:** Object, where keys are param names and values are param values.
* **options:** Object containing options for request.

See the example implementation in [src/playground/ApiClientImplementation.js](https://bitbucket.org/luomus/laji-form.js/src/HEAD/playground/ApiClientImplementation.js).

Pass the implementation to LajiForm like so:

```
<LajiForm apiClient={new ApiClientImplementation()} ... />
```

## Themes

### Bootstrap 3
LajiForm provides bootstrap 3 theme. To use it, you need to install `react-bootstrap@0.33.1` and provide the built-in bootstrap 3 theme it as a prop:

```
import bs3 from "laji-form/lib/themes/bs3";

<LajiForm theme={bs3} ... />
```

### Bootstrap 5

To use bootstrap 5 theme, you need to install following packages:
```
npm install --save react-bootstrap-5@npm:react-bootstrap@2.5.0
mpn install --save @fortawesome/fontawesome-svg-core@6.2.0
npm install --save @fortawesome/free-solid-svg-icons@6.2.0
npm install --save @fortawesome/react-fontawesome@0.2.0
```

Then it can be used by providing the theme to the form:

```
import bs5 from "laji-form/lib/themes/bs5";

<LajiForm theme={bs5} ... />
```

You can also use a custom theme and provide it the same way. There is a theme interface `themes/theme.ts` which the theme must implement.

## Notifications

LajiForm expects a notification implementation as a paratemer `notifier`. The `notifier` object must implement the interface below:

```
{
	success: message => (),
	warning: message => (),
	info: message => (),
	error: message => (),
}
```

## Styles

Styles can be found at  ```dist/styles.css```.

# Development

Run `npm ci` to install the dependencies and `npm start` to start the app.

Before running, you'll need to configure your personal apitest.laji.fi access token. Get the key to your email:

```
curl -X POST --header "Content-Type: application/json" --header "Accept: application/json" -d "{\
  \"email\": \"<YOUR EMAIL ADDRESS>\"\
  }" "http://apitest.laji.fi/v0/api-token"
```

Copy settings template file:

```
cp properties.json.example properties.json
```

Then put the API access token you got in your email to ```properties.json```. Put also your user access token & user ID there. Google API key is needed only for using the reverse geo location for foreign locations.

Try to keep the code style consistent - ```npm run lint``` should pass without errors.

## Developing different forms

Start the server and navigate to the local playground http://localhost:8083?id={form_id}

### Playground query parameters

Option        | Default | Description
--------------|---------|-----------------------------------------------------------------------------------------------
id            | -       | Form id to use. If empty, `playground/schemas.json` will be used for form schemas.
local         | `false` | Use local schemas under `forms/` instead of fetching from apitest.laji.fi.
localFormData | `false` | Use local formData under `forms/${id}.formData.json` instead of form's `prepopulatedDocument`.
settings      | `true`  | Use local settings defined in `playground/schemas`.
lang          | `fi`    | Language of the form. Doesn't affect local forms.
readonly      | `false` | Sets the form readonly.

### Examples

http://localhost:8083?id=JX.519 Trip report form with empty `formData`.

http://localhost:8083?id=MHL.1&localFormData=true Line transect form with local `formData`.

## Tests

You might need to install playwright dependencies to run the tests:

```
npx playwright install
```

The playground server can be running or or not. If it's not running, it will be automatically started.

Run the tests:

```
npm test
```

If you run into issues with browser dependencies etc, there's also a dockerized runner:

```
# Run all tests (builds docker image & runs it)
npm run test:docker

# Or if you want to give playwright params, run certain tests etc:
npm run test:docker -- test/mobile-form.spec.ts --project chromium
```

---
_Source: https://npm.io/package/@luomus/laji-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._