Haml ❤️ JSX
With this webpack loader you can inline HAML in JSX by putting it between delimeters, (~
and ~)
by default.
Use {...}
to embed javascript into the HAML, just like JSX.
{ return ~ #content columnsidebar % columnmain %h2 Welcome to our site! %p info ~;}
Installation
npm install haml-jsx-loader --save-dev
Add it to your webpack.config
:
...module: loaders: // Make sure 'haml-jsx' is last! test: /\.js$/ loaders: 'babel' 'haml-jsx' ... // Works with hot module replacement: test: /\.js$/ loaders: 'react-hot' 'babel' 'haml-jsx' ... ...
If you want to use your own delimiters, load haml-jsx
with a query passing them in.
'haml-jsx?open=(@&close=@)'
Use
Examples & features
One-line HAML:
const icon = ~ %ifafa-github ~;
Multi-line attributeutes
const text = ~ %~ const text = ~ %~
Nested (~ ~)
:
const menu = ~ #menu items~
Super-easy spacing control between elements with >
and <
, following this syntax:
const backText = ~ %plead Click %> here to go back~
Use .
for a div
, even when there is no class or id, instead of having to use %div
:
const divs = ~ one-div two-div#with-id #three-div class="four-div"~;
Spreading props in the tag is supported:
const props = href:"http://google.com" target:"_blank" const link = ~ % {linkTitle}~;
Notes
- Use double quotes, not single quotes in property lists
- You may use
class=
,className=
is no longer required - Use HTML-style, not Ruby-style, attribute lists:
%tag(key="val" key2={val2})
, not%tag{key: "val"}