Repository files navigation

Installation //Example //Contribution //Acknowledgement

• 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

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, addrescript-chakra in yourbsconfig.json:

-- "bs-dependencies": [],++ "bs-dependencies": [rescript-chakra],

• followingchakra-ui examplehere

// JavaScript 🟨 | TypeScript 🟦import{Box}from"@chakra-ui/react"// m={2} refers to the value of `theme.space[2]`<Boxm={2}>Tomato</Box>// You can also use custom values<BoxmaxW="960px"mx="auto"/>// sets margin `8px` on all viewports and `16px` from the first breakpoint and up<Boxm={[2,3]}/>// ReScript 🟥openChakra@react.componentletmake=()=><>  // m={2} refers to the value of `theme.space[2]`<Boxm={#2}>{"Tomato"->React.string}</Box>  // You can also use custom values<BoxmaxW={#px(960)}mx=#auto/>  // sets margin `8px` on all viewports and `16px` from the first breakpoint and up<Boxm={#array([#2, #3])}/></>

Or you can check thisExample.

All of Binding for Chakra-UI isn't completed, if you want to support this project, see the list below 🙌.

This is following and closely same with Chakra-UI.See Style Props and Implemented typedProps with typedCSS-Properties usebs-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

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

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

• 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

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

• Text
• Heading

• Alert Dialog
• Drawer
• Menu
• Modal
• Popover
• Tooltip

• Accordion
• Tabs
• Visually Hidden

• Breadcrumb
  • BreadcrumbItem
  • BreadcrumbLink
  • BreadcrumbSeparator
• Link
• LinkBox
  • LinkOverlay

• Avatar
  • AvatarGroup
• Icon
• Image

• Portal
• Transitions
  • Fade
  • ScaleFade
  • Slide
  • SlideFade
  • Collapse

• useBoolean
• useBreakpointValue
• useClipboard
• useControllable
• useDisclosure
• useMediaQuery
• useMergeRefs
• useOutsideClick
• usePrefersReducedMotion
• useTheme
• useToken

• Please, refer withconventionalcommits.org for writecommit message.

I'm usehygen.io for generate new component binding base onBox.res, see_templates/Box/new/new.ejs.tUSAGE:

• basic

hygen Box new --name Name

• create<Flex />

hygen Box new --name Flex

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