@dck/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 @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>
  };
};