Getting Started

Installation

To start using Framer Toolbox, you need to install it via npm. This package includes a collection of hooks, utilities, and UI components designed for the Framer environment.

npm

Next, update your main.tsx file to wrap your application with the FramerPluginProvider. This provider ensures that the necessary context and data from framer.json are loaded into Framer Toolbox.

Note: Framer Toolbox comes with a CSS file that styles its UI components. Do not forget to import it if you want to use them.

import '@triozer/framer-toolbox/index.css';
import React from 'react';
import ReactDOM from 'react-dom/client';
import { FramerPluginProvider } from '@triozer/framer-toolbox';

import { App } from './App.tsx';

const root = document.getElementById('root');

if (!root) throw new Error('Root element not found');

ReactDOM.createRoot(root).render(
  <React.StrictMode>
    <FramerPluginProvider>
      <App />
    </FramerPluginProvider>
  </React.StrictMode>,
);

Usage

You can either use the FramerPlugin wrapper in App.tsx or not. Here is a simplified example:

import React from 'react';
import {
  Button,
  FramerPlugin,
  SegmentedControls,
  TextControls,
  useStore,
  Spinner,
} from '@triozer/framer-toolbox';

type Resizable = 'both' | 'width' | 'height' | 'none';

export function App() {
  const { store, setStoreValue, isStoreLoaded } = useStore<{
    autoResize: boolean;
    resizable: Resizable;
    text: string;
  }>('my-plugin-store', {
    autoResize: false,
    resizable: 'both',
    text: 'Framer Toolbox',
  });

  const { autoResize, resizable, text } = store;

  if (!isStoreLoaded) return <Spinner />;

  return (
    <FramerPlugin
      autoResize={autoResize}
      uiOptions={{
        resizable: resizable === 'both' ? true : resizable === 'none' ? false : resizable,
      }}
    >
      <SegmentedControls
        title="Auto Resize"
        value={autoResize}
        items={[
          { label: 'Enabled', value: true },
          { label: 'Disabled', value: false },
        ]}
        onChange={(value) => setStoreValue('autoResize', value)}
      />
      <SegmentedControls
        title="Resizable"
        value={resizable}
        items={[
          { label: 'Both', value: 'both' },
          { label: 'Width', value: 'width' },
          { label: 'Height', value: 'height' },
          { label: 'None', value: 'none' },
        ]}
        onChange={(value) => setStoreValue('resizable', value as Resizable)}
      />
      <TextControls
        title="Text Controls"
        placeholder="Type something..."
        value={text}
        onChange={(value) => setStoreValue('text', value)}
      />
      <Button variant="primary">Click Me</Button>
    </FramerPlugin>
  );
}