BuckleScript bindings for glamor
bs-glamor –The API is still experimental. Only the css
function from glamor is exposed (with its result slightly incorrectly typed as a string
); no other functions such as renderStatic
are supported yet.
Installation
npm install --save bs-glamor
In your bsconfig.json
, include "bs-glamor"
in the bs-dependencies
.
Usage
The following examples (in Reason syntax) assume that Glamor
is included in the namespace:
open Glamor;
-
Simple styling:
css [color "red",border "1px solid black"] -
Styling with selectors (
@media
,:hover
,&
, etc.):css [color "red",Selector "@media (min-width: 300px)" [color "green"]] -
Selectors can be nested:
css [color "red",Selector "@media (min-width: 300px)" [color "green",Selector "& .foo" [color "blue"]]]
You can isolate inclusion of the Glamor
namespace in the following way:
Glamor.(css [color "red"])
The result of the css
function can be assigned to a class name, e.g. in JSX:
<div className=(css [color "red"]) />
Example
See reason-react-tictactoe for a live example.
Development
npm run start
Tests
There are some simplistic tests using bs-jest.
npm run test
Thanks
Thanks to reason-react-example, reason-react, and bs-jest for inspiration how to create a Reason library, and of course, thanks to glamor.