(attr)

JSX attributes on opening tags

(attr key? val?)

Where:

1. key: attribute name (the className in className="active" or svg:href in svg:href="...") *
2. val: attribute value or expression *

Matching:

1. string literal values, e.g. className="active"
2. expression values, e.g. onClick={handler}
3. boolean attributes, e.g. disabled

Behavior

• If a value selector is provided, boolean attributes without a value do not match.
• Attribute values inside {...} are matched against the inner expression.

Examples

Find external links that open in a new tab.

(jsx a (attr target (str "_blank")))

Selects in lines { 1 } but not in { 2, 3 }:

<a target="_blank" href="...">Docs</a>
<a target="_self" href="...">Home</a>
<Link target="_blank" />

---

Locate buttons that still use inline click handlers.

(jsx Button (attr onClick (id handleClick)))

Selects in lines { 1 } but not in { 2, 3 }:

<Button onClick={handleClick}>Save</Button>
<Button onClick={track}>Save</Button>
<Link onClick={handleClick}>Save</Link>

---

Find SVG elements using xlink:href before a migration.

(jsx _ (attr xlink:href))

Selects in lines { 1 } but not in { 2, 3 }:

<use xlink:href="#icon-user" />
<use href="#icon-user" />
<img xlink:href="#icon-user" />

---

Arguments

key

• Identifier: shorthand for (id)
• Pattern: shorthand for (id)
• (id)
• (:into) • (:and) • (:or) • (:not) • (:text) • (:kind) • (:replace) • (:capture)

val

• (:kind) • (:ref) • (:text) • (arr) • (attr) • (bool) • (call) • (child) • (comp) • (export) • (fun) • (id) • (id+) • (import) • (jsx) • (mem) • (null) • (num) • (obj) • (of) • (prop) • (regex) • (regex+) • (str) • (str*) • (str+) • (tpl) • (tpl*) • (var) • (:into) • (:and) • (:or) • (:not) • (:replace) • (:capture)