Home

Awesome

<p align="center"> <img src="./rescript-chakra.png" /> <br /> <br /> <a href="#installation">Installation</a> // <a href="#example">Example</a> // <a href="#contribution">Contribution</a> // <a href="#acknowledgement">Acknowledgement</a> </p>

ToC

<!-- vim-markdown-toc GFM --> <!-- vim-markdown-toc -->

Installation

Run the following in your favorit console:

yarn add rescript-chakra

OR

npm install --save rescript-chakra

Don't forget install dependencies requirements of @chakra-ui/react (Skip when exist)

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

OR

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

Then, add rescript-chakra in your bsconfig.json:

-- "bs-dependencies": [],
++ "bs-dependencies": [rescript-chakra],

Example

// JavaScript 🟨 | TypeScript 🟦
import { Box } from "@chakra-ui/react"
// m={2} refers to the value of `theme.space[2]`
<Box m={2}>Tomato</Box>
// You can also use custom values
<Box maxW="960px" mx="auto" />
// sets margin `8px` on all viewports and `16px` from the first breakpoint and up
<Box m={[2, 3]} />

// ReScript 🟥
open Chakra
@react.component
let make = () => <>
  // m={2} refers to the value of `theme.space[2]`
  <Box m={#2}> {"Tomato"->React.string} </Box>
  // You can also use custom values
  <Box maxW={#px(960)} mx=#auto />
  // sets margin `8px` on all viewports and `16px` from the first breakpoint and up
  <Box m={#array([#2, #3])} />
</>

Or you can check this Example.

Docs

All of Binding for Chakra-UI isn't completed, if you want to support this project, see the list below 🙌.

Style Props

This is following and closely same with Chakra-UI. See Style Props and Implemented typed Props with typed CSS-Properties use bs-css.

All of Style Props implementation is write in File:Chakra__MakeProps.res

Component

Layout

Forms

Data Display

Feedback

Typography

Overlay

Disclosure

Navigation

Media and Icons

Others

Hooks

Contribution

Make a Pull Request

Make a new component binding

I'm use hygen.io for generate new component binding base on Box.res, see _templates/Box/new/new.ejs.t USAGE:

hygen Box new --name Name

hygen Box new --name Flex

Acknowledgement