```tsx
import { useIntlayer } from "next-intlayer";
const { myInsertion } = useIntlayer("my-key");
return (
{myInsertion({
name: 2, // number
// or
name: "John", // string
// or
name: John, // React element
})}
);
```
```tsx
import { useIntlayer } from "react-intlayer";
const { myInsertion } = useIntlayer("my-key");
return (
{myInsertion({
name: 2, // number
// or
name: "John", // string
// or
name: John, // React element
})}
);
```
```vue
```
```tsx
import { useIntlayer } from "preact-intlayer";
const { myInsertion } = useIntlayer("my-key");
return (
{myInsertion({
name: 2, // number
// or
name: "John", // string
// or
name: John, // Preact element
})}
);
```
```tsx
import { useIntlayer } from "solid-intlayer";
const { myInsertion } = useIntlayer("my-key");
return (
{myInsertion({
name: 2, // number
// or
name: "John", // string
// or
name: John, // Solid element
})}
);
```
```svelte
{myInsertion({
name: 2, // number
// or
name: "John", // string
})}
```
```typescript
import { Component } from "@angular/core";
import { useIntlayer } from "angular-intlayer";
@Component({
selector: "app-insertion-example",
template: `
{{ content().myInsertion({
name: 'John'
}) }}
`,
})
export class InsertionExampleComponent {
content = useIntlayer("my-key");
}
```
## Content Schema Validation
Intlayer v8 introduces schema validation for dictionaries. You can now define reusable validation schemas in your configuration using Zod and apply them to your content files. This ensures your content always adheres to the expected structure, catching errors at build time.
### 1. Define Schemas
Define your schemas in `intlayer.config.ts`:
```typescript fileName="intlayer.config.ts"
import { z } from "zod";
export default {
schemas: {
"seo-metadata": z.object({
title: z.string().min(50).max(60),
description: z.string().min(150).max(160),
}),
},
};
```
### 2. Apply Schemas to Dictionaries
Reference the schema key in your dictionary definition:
```typescript fileName="src/example.content.ts"
import { type Dictionary } from "intlayer";
const aboutPageMetaContent = {
key: "about-page-meta",
schema: "seo-metadata", // <--
content: {
title: "About Our Company - Learn More About Us",
description: "Discover our company's mission, values, and team.",
},
} satisfies Dictionary<"seo-metadata">;
export default aboutPageMetaContent;
```
If the content doesn't match the schema (e.g., title is too short), the build process will raise an error.
---
### Enhanced Automatic Content Detection
In v8, Intlayer intelligently detects Markdown syntax, HTML tags, and variable insertions in your content strings. This means you can often omit helper functions like `md()`, `html()`, or `insert()`.
This behavior is enabled by default. You can now fine-tune this detection either globally in your `intlayer.config.ts` or per dictionary.
#### Granular Control
You can enable or disable specific types of transformations:
```typescript fileName="intlayer.config.ts"
export default {
dictionary: {
// contentAutoTransformation: false (default)
contentAutoTransformation: {
markdown: true,
html: true,
insertion: false, // Disable automatic insertion detection
},
},
};
```
**v7 behavior (Manual wrapping):**
```typescript fileName="src/example.content.ts"
import { md, insert } from "intlayer";
export default {
key: "my-key",
content: {
myMarkdown: md("## Hello World"),
myInsertion: insert("Hi {{name}}"),
},
};
```
**v8 behavior (Automatic detection):**
```typescript fileName="src/example.content.ts"
export default {
key: "my-key",
contentAutoTransformation: true, // Can also be set by dictionary definition or globally in intlayer.config.ts
content: {
myMarkdown: "## Hello World", // Automatically detected as Markdown
myHTML: "