Configure the raster display
Survey tile / Example acquisition
Three-channel mapping: b3 / b2 / b1. This example edits configuration; image rendering belongs to the consuming application.
Raster band mixer
A raster configuration editor with source-band mapping, single or three-channel modes, supplied stretch bounds and explicit missing-data metadata.
Preview
In action
When to use
Use it for
- Mapping supplied raster bands to red, green and blue display channels or a single band.
- Choose no enhancement, stretch, clipping or both. Each active channel keeps its own supplied minimum and maximum; band changes do not calculate new ranges.
- Use unique, non-empty band identifiers. noDataValue undefined means unknown, null means no sentinel, and zero remains a supplied missing-data value.
- The name prefix submits mode, stretch and active channel fields such as name.red.band and name.red.minimum. Inactive mappings remain in state but do not submit; ranges only submit when enhancement uses them.
Not for
- Treating the component as a raster renderer, deriving a histogram or assuming a missing-data value from the image appearance.
- Reusing display ranges across different bands without application review. No automatic statistics or unit conversion runs here.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { RasterBandMixer } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/raster-band-mixer.
2. Vendor the source
npx @noorddev/vlak-cli add raster-band-mixer
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/raster-band-mixer.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { RasterBandMixer } from "@noorddev/vlak-react";
import type { RasterBandConfiguration } from "@noorddev/vlak-react";
const configuration: RasterBandConfiguration = {
mode: "rgb", stretch: "none",
red: { bandId: "b3", minimum: 0, maximum: 255 },
green: { bandId: "b2", minimum: 0, maximum: 255 },
blue: { bandId: "b1", minimum: 0, maximum: 255 },
single: { bandId: "b1", minimum: 0, maximum: 255 },
};
<RasterBandMixer label="Band mapping" name="raster" defaultValue={configuration} bands={[
{ id: "b1", label: "Band 1", unit: "counts", noDataValue: 0 },
{ id: "b2", label: "Band 2", unit: "counts", noDataValue: null },
{ id: "b3", label: "Band 3", unit: "counts" },
]} />Props
RasterBandMixer
Selects source bands and display ranges. No pixels, statistics or missing-data rules are inferred.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | ||
bandsrequired | readonly RasterSourceBand[] | ||
value | RasterBandConfiguration | ||
defaultValue | RasterBandConfiguration | initial | |
onValueChange | (value: RasterBandConfiguration) => void | Emits configuration only. The host owns rendering and any statistics or range calculation. | |
description | ReactNode | ||
readOnly | boolean |
Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves through mode, range treatment and active channel controls. |
| Arrow keys, Home, End | Navigates the focused Vlak selector. Enter or Space commits a choice; Escape closes the menu. |
| Typing | Edits each active channel's numeric range bounds. |
Accessibility
- A fieldset legend names the editor. Vlak Select and Input provide shared control paint, with channel labels and 44px targets.
- Missing, unavailable and disabled source bands stay distinct. Missing-data values and units are readable text, with zero preserved.
- Active channels require a band. Enhancement requires finite bounds with minimum less than maximum; invalid configurations fail native form validation.
- Switching modes preserves inactive mappings without submitting them. No enhancement hides and omits range fields without discarding their values.
- Native form reset restores uncontrolled defaults, including external forms; controlled updates remain with the application.
- Read-only valid configuration values submit; disabled fields do not. Native fieldset attributes, ref, className and style pass through.
Markup
<fieldset class="rs-raster-band-mixer"><legend class="rs-raster-band-mixer-legend">Band mapping</legend><p class="rs-raster-band-mixer-note">The application renders the image from this configuration.</p><div class="rs-raster-band-mixer-fields"><div class="rs-raster-band-mixer-label"><span id="geo-rendering-mode-label">Rendering mode</span><div class="rs-select rs-select-fluid rs-raster-band-mixer-control"><button type="button" class="rs-dropdown" role="combobox" aria-labelledby="geo-rendering-mode-label" aria-expanded="false" aria-haspopup="listbox">Single band</button></div></div><div class="rs-raster-band-mixer-label"><span id="geo-range-treatment-label">Range treatment</span><div class="rs-select rs-select-fluid rs-raster-band-mixer-control"><button type="button" class="rs-dropdown" role="combobox" aria-labelledby="geo-range-treatment-label" aria-expanded="false" aria-haspopup="listbox">No enhancement</button></div></div></div><div class="rs-raster-band-mixer-channel"><p class="rs-raster-band-mixer-title">Single band</p><div class="rs-raster-band-mixer-label"><span id="geo-single-band-source-label">Single band source</span><div class="rs-select rs-select-fluid rs-raster-band-mixer-control"><button type="button" class="rs-dropdown" role="combobox" aria-labelledby="geo-single-band-source-label" aria-expanded="false" aria-haspopup="listbox">Band 1</button></div></div><p class="rs-raster-band-mixer-note">Missing-data value: 0. Unit: counts</p></div></fieldset>
Classes
.rs-raster-band-mixer.rs-raster-band-mixer-legend.rs-raster-band-mixer-fields.rs-raster-band-mixer-channel.rs-raster-band-mixer-title.rs-raster-band-mixer-label.rs-raster-band-mixer-control.rs-raster-band-mixer-note