React Export adalah plugin yang memungkinkan Anda mengekspor UI yang dirancang secara visual di Framer langsung menjadi kode React produksi. Dengan menggunakan unframer CLI, komponen yang dipilih di Framer dapat diubah menjadi komponen React yang memiliki tipe, sehingga dapat digunakan dengan mudah di semua framework React seperti Next.js, Remix, dan lainnya.

Fitur Utama

• Penyediaan Keselamatan Tipe Sepenuhnya: Komponen yang diekspor disertai dengan file definisi tipe .d.ts, memungkinkan penyelesaian kode otomatis dan mencegah kesalahan build.

• Interface Props yang Dibuat Secara Otomatis: Variabel dan token desain yang ditetapkan di Framer otomatis dipetakan ke props React, membuat penulisan kode menjadi lebih mudah.

• Dukungan Breakpoint Responsif: Atribut responsif yang ditetapkan di Framer tercermin dalam komponen React, sehingga berfungsi di berbagai resolusi.

• Kompatibilitas dengan Berbagai Framework: Dapat digunakan tanpa batasan dalam berbagai proyek berbasis React seperti Next.js, Remix, dan lainnya.

Cara Penggunaan

1. Desain UI yang diinginkan seperti header, bagian hero, tombol, dll., di Framer.

2. Pilih komponen yang ingin dikonversi ke kode React.

3. Gunakan unframer CLI untuk mengekspor komponen yang dipilih menjadi kode React. File definisi TypeScript disertakan.

4. Impor komponen yang telah dikonversi ke proyek dan gunakan props untuk menyesuaikan seperti pengaturan onClick, perubahan teks, tautan, dll.

Cara Kerja

Plugin ini mengekspor komponen Framer ke dalam file JavaScript. Fitur berikut ini semua didukung.

• SSR (Rendering Sisi Server)

• Variabel Framer (variable)

• Fitur fetch dan form

• Pengaturan gaya warna dan mode gelap

Saat Anda mengunduh komponen Framer menggunakan unframer CLI, selain kode dalam format JavaScript, file definisi TypeScript juga diekspor. File tersebut dibuat secara otomatis sehingga tidak bisa dimodifikasi secara manual, namun dapat disesuaikan melalui variabel yang ditetapkan di Framer.

Hal yang Perlu Diperhatikan

Diperlukan pengetahuan pengembangan React dan berlangganan rencana berbayar untuk penggunaan.

• Rencana Pribadi: $50/bulan

• Rencana Bisnis: $250/bulan

• Diskon tersedia untuk Open Source/Lembaga Nirlaba (perlu penawaran)

• 7 hari pertama menawarkan uji coba gratis.