haml-jsx-loader
v1.0.2
Published
Inline HAML with JSX
Downloads
263
Readme
Haml :heart: 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.
render() {
return (~
#content
.column.sidebar
%Sidebar(property={value}
onSelect={() => ...})
.column.main
%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 = (~ %i.fa.fa-github ~);
Multi-line attributeutes
const text = (~
%textarea(name="message"
placeholder="Your message here..."
defaultValue={this.props.message})
~)
const text = (~
%textarea(
name="message"
placeholder="Your message here..."
defaultValue={this.props.message}
)
~)
Nested (~ ~)
:
const menu = (~
#menu
{items.map((item) => (~ %Item(key={item.id} item={item}) ~))}
~)
Super-easy spacing control between elements with >
and <
, following this syntax:
const backText = (~
%p.lead
Click
%a(href="/")> 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 = (~
%a({...props} alt="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"}