Installation // Example // Contribution // Acknowledgement

ToC

• Installation
• Example
• Docs
  • Style Props
  • 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
• Acknowledgement

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

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