Skip to main content

Getting started

Step by step to install Ancestor in your project.

info

This project assumes that you have a functional project with ReScript and React. Check out how to create a ReScript project with React.

Installation​

First off, install Ancestor using npm/yarn:

Terminal
yarn add @rescriptbr/ancestor

If you want to use the default setup, you need to install Emotion.

Terminal
yarn add @emotion/css
info

This step is optional. Ancestor is agnostic of CSS in JS library. You can use any CSS in JS library of your preference by providing a CSS function on the setup. Read more about it on the customization section.

Add the package to bs-dependencies in your bsconfig.json:

bsconfig.json
{
 ...
"bs-dependencies": [
  "@rescript/react",
  "@rescriptbr/ancestor"
 ]
}

Basic usage​

Ancestor comes with a default setup. You can use the default setup by exposing the module writing open Ancestor:

App.res
open Ancestor

@react.component
let make = () => {
  <Grid>
    <Box
      columns=[#xs(#12), #md(#6), #lg(#4)]
      display=[#xs(#flex)]
      alignItems=[#xs(#center)]
      px=[#xs(8), #md(12)]
      mt=[#xs(12)]
    >
      {React.string("Hello")}
    </Box>

    <Box
      columns=[#xs(#12), #md(#6), #lg(#4)]
      display=[#xs(#flex)]
      alignItems=[#xs(#center)]
      py=[#xs(6), #md(8)]
      m=[#xs(12)]
    >
      {React.string("World")}
    </Box>
  </Grid>
}
info

If you wish, you can customize the default setup by following the instructions of customization.