---
title: Cloud Usage Examples
description: Examples of using Jodit Cloud with React, Vue.js, and vanilla JavaScript.
keywords: jodit cloud, react, vue, examples, integration
---

# Usage Examples

## React Component

```jsx
import React, { useEffect, useRef } from 'react';

const JoditEditor = ({ value, onChange, apiKey }) => {
	const textareaRef = useRef(null);
	const editorRef = useRef(null);

	useEffect(() => {
		// Dynamic script loading
		const script = document.createElement('script');
		script.src = `https://cloud.xdsoft.net/v4/jodit-pro/?key=${apiKey}`;
		script.onload = () => {
			window.JoditLoader.ready().then(() => {
				editorRef.current = window.Jodit.make(textareaRef.current, {
					events: {
						change: newValue => onChange?.(newValue)
					}
				});

				if (value) {
					editorRef.current.value = value;
				}
			});
		};
		document.head.appendChild(script);

		return () => {
			if (editorRef.current) {
				editorRef.current.destruct();
			}
			document.head.removeChild(script);
		};
	}, [apiKey]);

	return <textarea ref={textareaRef} defaultValue={value} />;
};
```

## Vue.js Component

```vue
<template>
	<textarea ref="textarea" :value="modelValue"></textarea>
</template>

<script>
export default {
	props: ['modelValue', 'apiKey'],
	mounted() {
		this.loadJodit();
	},
	beforeUnmount() {
		if (this.editor) {
			this.editor.destruct();
		}
	},
	methods: {
		async loadJodit() {
			// Script loading
			const script = document.createElement('script');
			script.src = `https://cloud.xdsoft.net/v4/jodit-pro/?key=${this.apiKey}`;

			await new Promise(resolve => {
				script.onload = resolve;
				document.head.appendChild(script);
			});

			// Editor initialization
			await window.JoditLoader.ready();
			this.editor = window.Jodit.make(this.$refs.textarea, {
				events: {
					change: value => {
						this.$emit('update:modelValue', value);
					}
				}
			});
		}
	}
};
</script>
```