Rescript-chakra NPM

Installation

Run the following in your favorit console:

yarn add rescript-chakra

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

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

following chakra-ui example here

// 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.

Margin and Padding
Color and Background Color
Gradient
Layout width and height
Flexbox
Grid Layout
Background
Borders
Border Radius
Position
Shadow
Pseudo
Other Style Props 🚧 (Partially Implemented)

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

Component

Layout

Aspect Ratio
Box
Center
- Square
- Circle
Container
Flex
- Spacer
Grid
- GridItem
SimpleGrid
Stack
- VStack
- HStack
Wrap
- WrapItem

Forms

Button
- Button Group
Checkbox
Editable
Form Control
Icon Button
Input
- InputGroup
- InputLeftAddon
- InputRightAddon
- InputLeftElement
- InputRightElement
Number Input
Pin Input
Radio
Select
Slider
Switch
Textarea

Data Display

Badge
Close Button
Code
Divider
Kbd
List
- ListItem
- ListIcon
- OrderedList
- UnorderedList
Stat
- StatGroup
- StatLabel
- StatHelpText
- StatNumber
- StatArrow
Table
- Thead
- Tbody
- Tfoot
- Tr
- Th
- Td
- TableCaption
Tag
- TagLabel
- TagLeftIcon
- TagRightIcon
- TagCloseButton

Feedback

Alert
Circular Progress
- Circular Progress Label
Progress
Skeleton
- SkeletonText
- SkeletonCircle
Spinner
Toast
- useToast
- createStandaloneToast

Typography

Text
Heading

Overlay

Alert Dialog
Drawer
Menu
Modal
Popover
Tooltip

Disclosure

Accordion
Tabs
Visually Hidden

Navigation

Breadcrumb
- BreadcrumbItem
- BreadcrumbLink
- BreadcrumbSeparator
Link
LinkBox
- LinkOverlay

Media and Icons

Avatar
- AvatarGroup
Icon
Image

Others

Portal
Transitions
- Fade
- ScaleFade
- Slide
- SlideFade
- Collapse

Hooks

useBoolean
useBreakpointValue
useClipboard
useControllable
useDisclosure
useMediaQuery
useMergeRefs
useOutsideClick
usePrefersReducedMotion
useTheme
useToken

Contribution

Make a Pull Request

Please, refer with conventionalcommits.org for write commit message.

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:

basic

hygen Box new --name Name

create <Flex />

hygen Box new --name Flex

Acknowledgement

chakra-ui/chakra-ui ⚡️ Simple, Modular & Accessible UI Components for your React Applications
giraud/bs-css Statically typed DSL for writing css in reason.