bs-chakra-ui 🚧

Bucklescript bindings for chakra-ui.

Important note, chakra-ui use the styled system but in order to avoid props bindings overhead, I decided to mainly use <Box /> when I need to create space, etc.

Install

yarn add @dck/bs-chakra-ui

Add it to bs-dependencies in your bsconfig.json :

{
  "bs-dependencies": ["@dck/bs-chakra-ui"]
}

Example

open BsChakra;

module App = {
  [@react.component]
  let make = () => {
    let (isChecked, setChecked) = React.useState(() => false);

    <ThemeProvider theme>
      <CSSReset />
      <Text fontSize={Responsive([|`center, `right, `left|])}>
        "Hello responsive"->React.string
      </Text>
      <Stack isInline=true align=`center spacing=2>
        <FormLabel htmlFor="toggle">
          <Text fontSize={All(`center)}>
            "Toggle"->React.string
          </Text>
        </FormLabel>
        <Switch
          id="toggle"
          size=`lg
          isChecked
          onChange={_ => setChecked(v => !v)}
        />
      </Stack>
    </ThemeProvider>
  };
};

Todo

• Accordion
• Alert
• AspectRatioBox
• Avatar
• Badge
• Box 🚧
• Breadcrumb
• Button 🚧
• Checkbox
• CircularProgress
• CloseButton
• Code
• Collapse
• ControlBox
• Drawer
• Editable
• Flex
• FormControl
• FormHelperText
• FormErrorMessage
• Heading
• Icon
• IconButton
• Image
• Input
• Link
• List
• Modal
• Menu
• NumberInput
• Popover
• Progress
• PseudoBox
• Radio
• Slider
• Spinner
• Stat
• Stack
• Switch
• Tabs
• Tag
• Textarea
• Text
• Toast
• Tooltip
• useClipboard
• useDisclosure
• useTheme