CODEWITHSUNDEEP
htmlcssreactjsstyled-components
Divide by Zero
Divide by Zero

Reputation: 1474

React.js Styled Components : Adding HTML attributes

So we are using styled-components. I want to do some work on our accessibility and need to add tabindex="0" as HTML attribute to some of those components. How do i do this without it being passed as a prop?

e.g.

<PlayButton className={className} onClick={handleClick} tabindex="0">

Upvotes: 5

Views: 6345

Answers (2)

Aaron Hakala
Aaron Hakala

Reputation: 302

You can add tabIndex straight to the styled component it just has to be camelCase: <PlayButton className={className} onClick={handleClick} tabIndex="0" />

in react docs: https://reactjs.org/docs/dom-elements.html

Upvotes: 6

Harsh Shah
Harsh Shah

Reputation: 1596

You can do it using the attribute spread operator:

let props = condition ? {tabIndex: 1} : {};
let div = <div {...props} />

or you can check out their documentation Guide

Example:

React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the camelCase convention just like the DOM APIs:

<div tabIndex="-1" />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.

Upvotes: 4

Related Questions