open-index/open-npm huggingface dataset:
npm package: @inlang/paraglide-js-react
Description: React component for rendering [Paraglide JS](https://github.com/opral/paraglide-js) messages that contain markup.
Author: inlang
Latest version: 1.0.1

React component for rendering [Paraglide JS](https://github.com/opral/paraglide-js) messages that contain markup.

```tsx
import { ParaglideMessage } from "@inlang/paraglide-js-react";
import { m } from "./paraglide/messages.js";

export function ContactCta() {
	return (
		<ParaglideMessage
			message={m.contact}
			inputs={{ email: "hello@example.com" }}
			markup={{
				link: ({ children, inputs }) => (
					<a href={`mailto:${inputs?.email}`}>{children}</a>
				),
				b: ({ children }) => <strong>{children}</strong>,
			}}
		/>
	);
}
```

`ParaglideMessage` uses `message.parts()` when present and falls back to `message()` for
plain-text messages.
npm package: @inlang/paraglide-js-solid
Description: Solid component for rendering [Paraglide JS](https://github.com/opral/paraglide-js) messages that contain markup.
Author: inlang
Latest version: 1.0.1

Solid component for rendering [Paraglide JS](https://github.com/opral/paraglide-js) messages that contain markup.

```tsx
import { ParaglideMessage } from "@inlang/paraglide-js-solid";
import { m } from "./paraglide/messages.js";

const view = (
	<ParaglideMessage
		message={m.cta}
		inputs={{}}
		markup={{
			link: ({ children, options }) => <a href={options.to}>{children}</a>,
		}}
	/>
);
```

`ParaglideMessage` uses `message.parts()` when present and falls back to `message()` for
plain-text messages.
npm package: @inlang/paraglide-js-svelte
Description: Svelte component for rendering [Paraglide JS](https://github.com/opral/paraglide-js) messages that contain markup.
Author: inlang
Latest version: 1.0.1

Svelte component for rendering [Paraglide JS](https://github.com/opral/paraglide-js) messages that contain markup.

Given this message in your source file (for example `messages/en.json`):

```json
{
	"cta": "{#link to=/docs}Read docs{/link}"
}
```

```svelte
<script lang="ts">
	import { ParaglideMessage } from "@inlang/paraglide-js-svelte";
	import { m } from "./paraglide/messages.js";
	import CustomLink from "./CustomLink.svelte";
</script>

<ParaglideMessage message={m.cta} inputs={{}}>
	{#snippet link({ children, options })}
		<CustomLink to={options.to}>
			{@render children?.()}
		</CustomLink>
	{/snippet}
</ParaglideMessage>
```

`<ParaglideMessage />` uses `message.parts()` when present and falls back to
`message()` for plain-text messages.
npm package: @inlang/paraglide-js-vue
Description: Vue component for rendering [Paraglide JS](https://github.com/opral/paraglide-js) messages that contain markup.
Author: inlang
Latest version: 1.0.1

Vue component for rendering [Paraglide JS](https://github.com/opral/paraglide-js) messages that contain markup.

```vue
<script setup lang="ts">
import { ParaglideMessage } from "@inlang/paraglide-js-vue";
import { h } from "vue";
import { m } from "./paraglide/messages.js";

const markup = {
	link: ({ children, options }) => h("a", { href: options.to }, children),
};
</script>

<template>
	<ParaglideMessage :message="m.cta" :inputs="{}" :markup="markup" />
</template>
```

`ParaglideMessage` uses `message.parts()` when present and falls back to `message()` for
plain-text messages.