(attr) - JavaScript

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

1. Identifier: shorthand for (id)
   
2. Pattern: shorthand for (id)
   
3. (id)
   
4. (:into)
5. (:nearest)
6. (:and)
7. (:or)
8. (:not)
9. (:text)
10. (:kind)
11. (:replace)
12. (:replace-in)
13. (:capture)

val

1. (:into)
2. (:nearest)
3. (:and)
4. (:or)
5. (:not)
6. (:text)
7. (:kind)
8. (:replace)
9. (:replace-in)
10. (:capture)
11. (:ref)
12. (arr)
13. (attr)
14. (bool)
15. (call)
16. (child)
17. (comp)
18. (export)
19. (fun)
20. (id)
21. (id+)
22. (import)
23. (jsx)
24. (mem)
25. (null)
26. (num)
27. (obj)
28. (of)
29. (prop)
30. (regex)
31. (regex+)
32. (str)
33. (str*)
34. (str+)
35. (tpl)
36. (tpl*)
37. (var)