Skip to main content

​
1. Importar os Estilos

O SDK requer estilos CSS para funcionar corretamente. Importe o arquivo de estilos no seu projeto: 
// No seu arquivo principal (App.tsx, _app.tsx, layout.tsx, etc.)
import '@triglit/react-sdk/styles.css';
Se você estiver usando Next.js, importe no _app.tsx ou no layout.tsx (App Router). Se estiver usando Create React App ou Vite, importe no index.tsx ou main.tsx.

​
2. Configurar o Provider

Envolva sua aplicação (ou a parte que usa o SDK) com o TriglitProvider: 
import { TriglitProvider } from '@triglit/react-sdk';
import '@triglit/react-sdk/styles.css';

function App() {
  return (
    <TriglitProvider config={{ apiKey: 'pk_sua_chave_aqui' }}>
      {/* Sua aplicação */}
    </TriglitProvider>
  );
}

​
3. Configuração Completa

import { TriglitProvider } from '@triglit/react-sdk';
import '@triglit/react-sdk/styles.css';

function App() {
  return (
    <TriglitProvider
      config={{
        // Chave de API (obrigatória)
        apiKey: 'pk_sua_chave_aqui',
        
        // URL base da API (opcional, padrão: https://api.triglit.com)
        baseURL: 'https://api.triglit.com',
        
        // Configuração de i18n (opcional)
        i18n: {
          locale: 'pt-BR',
          // ou traduções customizadas
          translations: {
            'workflow.editor.save': 'Salvar',
            // ...
          },
        },
        
        // Callbacks para eventos (opcional)
        callbacks: {
          onWorkflowVersionCreated: (version) => {
            console.log('Versão criada:', version);
          },
          onWorkflowVersionPublished: (response) => {
            console.log('Versão publicada:', response);
          },
          // ...
        },
      }}
    >
      {/* Sua aplicação */}
    </TriglitProvider>
  );
}

​
Configuração via Variáveis de Ambiente

Você pode configurar a chave de API via variáveis de ambiente: 
# .env.local ou .env
NEXT_PUBLIC_TRIGLIT_PUBLISHABLE_KEY=pk_sua_chave_aqui

// O SDK detecta automaticamente a variável de ambiente
<TriglitProvider config={{}}>
  {/* Sua aplicação */}
</TriglitProvider>
O SDK procura por estas variáveis (nessa ordem):
  1. NEXT_PUBLIC_TRIGLIT_PUBLISHABLE_KEY (recomendado para Next.js)
  2. TRIGLIT_PUBLISHABLE_KEY