Real-case Usage Example

Here’s an example of how to effectively use the OLC React SDK within a functional React component:

import { useEffect } from 'react';
import TemplateBuilder from '@openlettermarketing/olc-react-sdk';
import '@blueprintjs/core/lib/css/blueprint.css';

const App = () => {
  useEffect(() => {
    TemplateBuilder({
      container: document.getElementById('template-builder-container'),
      secretKey: 'your-secret-key', // Secret key provided by BE support
      publicApiKey: 'your-api-key', // Public key provided by BE support
      sandbox: false,
      onSubmit: async create(payload) {
        console.log('Template submitted:', payload);
        // Implement your submission logic here (e.g., send data to backend)
      },
    });
  }, []);

  return (
    <>
      <h1>Welcome to My Template Builder</h1>
      <div id="template-builder-container" />
    </>
  );
}

export default App;

Conclusion

This comprehensive guide now includes all necessary details about installation, obtaining API keys from backend support, configuration through props, customization options, and practical usage examples—all designed to help developers integrate and utilize the OLC React SDK effectively in their applications.