styled-system in reason!
<Text px=3 size=80> {"hummussss" |> React.string} </Text>Use at your own risk.
This is a proof-of-concept for a styled-system type of API in reason-react.
styled-system allows for, as the author states, "rapid UI development", and this is true in reasonml also - perhapes even more so. If typing is your bottleneck in reasonml-based iterative product design, you may benefit from this library, which allows you to pre-define your font and spacing scale units, so you can reference them by scale index, as opposed to explicitly. This kind of abstraction comes with a number of benefits.
Beyond reason-react, reason-styled-system is dependency-free, and will likely stay that way.
- install from github:
npm i github.com:hew/reason-styled-system- Add the library to your
bsconfig.json:
"bs-dependencies": ["reason-styled-system"],/* System.re */
module Scale = {
let space = [|2, 4, 8, 16, 32|];
let font = [|2, 4, 8, 16, 32|]; // I'm lazy rn, but this would be different.
};
module Units = {
let px = "px";
};/* Primatives.re */
module Box =
Box.BoxMaker({
let scale = System.Scale.space;
let domUnit = System.Units.px;
});
module Text =
Text.TextMaker({
let scale = System.Scale.font;
let domUnit = System.Units.px;
});
/* In some component */
[@react.component]
let make = () => {
Primatives.(
<>
/* All the elements follow the scale, up to five. Past five, the value is just passed
explicitly. So here, 3 = 8px, and 80 = 80px */
<Text px=3 size=80> {"Sup mang" |> React.string} </Text>
/* Here, 2 = 4px, and 30 = 30px */
<Box mt=2 px=30> <div /> </Box>
</>
);
};
Core
- space
- fontSize
- color
- width
Utility
- style
- is (text)
- responsive
Planned Others
- flex
- As this library is based on styled-system, most of the credits go to Brent Jackson and the maintainers of styled-system.
- https://github.com/hew/styled-functors