@mitosite-ai/mitosite-react

Personalize your React app for every user!

Installation

npm install @mitosite-ai/mitosite-react

Quick Start

index.ts

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { MitoProvider } from '@mitosite-ai/mitosite-react'; 

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
    <MitoProvider providerId="company-abc-123">
      <App />
    </MitoProvider>
  </React.StrictMode>
);

App.tsx

import React from 'react';
import HomePage from './HomePage';
import BlogPage from './BlogPage';

function App() {
  return (
    <div>
      <HomePage />
      <BlogPage />
    </div>
  );
}

export default App;

HomePage.tsx

import React from 'react';
import { useMitoContent } from '@mitosite-ai/mitosite-react';

function HomePage() {
  const heroText = useMitoContent({ 
    type: 'text',
    contentId: 'hero-title',
    defaultValue: 'Default Welcome Message',
  });
  const productImage = useMitoContent({ 
    type: 'image',
    contentId: 'product-image',
    defaultValue: 'assets/test/image.jpg',
  });

  return (
    <div>
      <h1>{heroText}</h1>
      <img src={productImage} alt="Main product" />
    </div>
  );
}

export default HomePage;