@colisweb/bs-chakra-ui NPM

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 @colisweb/bs-chakra-ui

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

{
  "bs-dependencies": ["@colisweb/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

Add Box and PseudoBox props automatically

Box

// use-make-box
[@bs.module "@chakra-ui/core"] [@react.component]
external make: (~some: bool=?) => React.element = "Tabs";

// use-makeProps-box
let makeProps = (~some: option(bool)=?) =>
  makeProps(~some=?some->Belt.Option.map(v => true));

PseudoBox

// use-make-pseudoBox
[@bs.module "@chakra-ui/core"] [@react.component]
external make: (~some: bool=?) => React.element = "Tabs";

// use-makeProps-pseudoBox
let makeProps = (~some: option(bool)=?) =>
  makeProps(~some=?some->Belt.Option.map(v => true));