rn-markdown-editor v1.1.0: One Config to Theme Every Component

Up until now, theming rn-markdown-editor meant reaching for a handful of loosely related props on ThemeProvider — lightColors, darkColors, typography, container — and hoping the rest of the library's ~50 components picked up sensible defaults on their own. That worked for colors and type scale, but there was no single place to say "every Button in this app should have a 12px radius" or "bump the gap on Grid in comfortable mode." v1.1.0 closes that gap with a single, structured config prop.

What's new

ThemeProvider now accepts a config object of type ThemeLibraryConfig, with four top-level sections:

• colors — lightColors / darkColors, same shape as before, just nested under config.colors instead of passed as top-level props.
• heading — typography settings (baseFontSize, per-level headingSizes), replacing the old typography prop.
• container — layout tokens like padding, borderRadius, and the containerSizes breakpoint scale.
• root — global design tokens: spacing, radius, iconSize, focusRingColor, focusRingWidth, and animationDuration.
• components — the new part. A per-component config map, so individual components (grid, button, and so on) can expose their own tunable options without inventing a new provider prop each time.

Every section is deep-merged against the library's built-in defaults, so you only need to specify the values you actually want to override.

<ThemeProvider
  config={{
    colors: { darkColors: { accent: "#22D3EE" } },
    root: { spacing: { sm: 6, md: 14, lg: 22 }, animationDuration: 150 },
    components: {
      grid: { variantGap: { compact: 4, comfortable: 8, spacious: 16 } },
    },
  }}
>
  <App />
</ThemeProvider>

Reading component-level config: useComponentConfig

To go with the new components section, there's a matching hook:

const cfg = useComponentConfig("button");
const borderRadius = cfg?.borderRadius ?? 8;

Each component reads its own slice of config.components and deep-merges it with its internal defaults — nothing renders differently just because the key is absent. Grid and Grid.List are the first consumers of this pattern: their shared useGridConfig hook resolves a variant's gap by falling through, in order, from the matched breakpoint's own gap, to config.components.grid.variantGap[variant], to the library's built-in VARIANT_GAP[variant] default, and finally to 0. That means you can retune "compact" / "comfortable" / "spacious" spacing app-wide from one place instead of touching every Grid.Root and Grid.List call site.

Backwards compatibility

Nothing breaks. The old top-level props — lightColors, darkColors, typography, container — are still accepted and still work exactly as before. Internally, ThemeProvider now resolves each setting as "config value if present, otherwise legacy prop, otherwise default," so:

// still valid
<ThemeProvider lightColors={{ primary: "#111" }} typography={{ baseFontSize: 18 }}>

and

// new API, same effect
<ThemeProvider config={{ colors: { lightColors: { primary: "#111" } }, heading: { baseFontSize: 18 } }}>

produce identical themes. If both are supplied for the same setting, config wins.

Why bother migrating

• One shape for every future component. As new components ship with their own tunables, they land under config.components.<name> instead of new provider props — no more guessing which prop belongs to which component.
• App-wide tuning, not per-instance patching. The Grid variantGap example above is the template: a single config value instead of repeating the same override at every call site.
• Cleaner provider signature. Four grouped sections read better than a growing list of unrelated top-level props.

Migration guide

1. Wrap your existing lightColors / darkColors under config.colors.
2. Rename typography → config.heading.
3. Move container under config.container.
4. Anything you were duplicating across components — spacing, radius, icon sizes — pull up into config.root once.
5. Start adopting config.components.<name> overrides as components add support (currently: grid).

None of these steps are required immediately — the legacy props aren't going anywhere in this release — but new theming features will be added to config going forward, so it's the better long-term home for your theme.

npm install rn-markdown-editor@1.1.0