How to add custom html attributes in JSX

Question

There are different reasons behind it  but I wonder how to simply add custom attributes to an element in JSX

User · Answer

For any custom attributes I use react-any-attr package https   www npmjs com package react-any-attr

User · Answer

You can use the  is  attribute to disable the React attribute whitelist for an element   See my anwser here  Stackoverflow

User · Answer

Depending on what exactly is preventing you from doing this  there s another option that requires no changes to your current implementation  You should be able to augment React in your project with a  ts or  d ts file  not sure which  at project root  It would look something like this   declare module  react        interface HTMLAttributes lt T gt  extends React DOMAttributes lt T gt             custom-attribute    string     or  some-value     another-value            Another possibility is the following   declare namespace JSX       interface IntrinsicElements            elemName  string   any            See JSX   Type Checking  You might even have to wrap that in a declare global    I haven t landed on a final solution yet   See also  How do I add attributes to existing HTML elements in TypeScript JSX

User · Answer

I ran into this problem a lot when attempting to use SVG with react   I ended up using quite a dirty fix  but it s useful to know this option existed  Below I allow the use of the vector-effect attribute on SVG elements   import SVGDOMPropertyConfig from  react lib SVGDOMPropertyConfig js   import DOMProperty from  react lib DOMProperty js    SVGDOMPropertyConfig Properties vectorEffect   DOMProperty injection MUST USE ATTRIBUTE  SVGDOMPropertyConfig DOMAttributeNames vectorEffect    vector-effect     As long as this is included imported before you start using react  it should work

User · Answer

EDIT  Updated to reflect React 16  Custom attributes are supported natively in React 16  This means that adding a custom attribute to an element is now as simple as adding it to a render function  like so   render       return        lt div custom-attribute  some-value    gt           For more  https   reactjs org blog 2017 09 26 react-v16 0 html support-for-custom-dom-attributes https   facebook github io react blog 2017 09 08 dom-attributes-in-react-16 html    Previous answer  React 15 and earlier   Custom attributes are currently not supported  See this open issue for more info   https   github com facebook react issues 140  As a workaround  you can do something like this in componentDidMount   componentDidMount  function       var element   ReactDOM findDOMNode this refs test     element setAttribute  custom-attribute    some value        See https   jsfiddle net peterjmag kysymow0  for a working example   Inspired by syranide s suggestion in this comment

User · Answer

You can add an attribute using ES6 spread operator  e g   let myAttr     data-attr    value     and in render method    lt MyComponent     myAttr    gt

User · Answer

Consider you want to pass a custom attribute named myAttr with value myValue  this will work    lt MyComponent data-myAttr  myValue    gt

User · Answer

See attribute value in console on click event           alertMessage  cEvent              console log cEvent target getAttribute  customEvent       display attribute value                      simple add customAttribute as your wish in render method  render        return  lt div gt            lt button customAttribute  My Custom Event Message  onClick  this alertMessage bind this     gt Click Me lt  button gt               lt  div gt

User · Answer

You can do it in componentDidMount   lifecycle method in following way  componentDidMount        const buttonElement   document querySelector   rsc-submit-button        const inputElement   document querySelector   rsc-input        buttonElement setAttribute  aria-hidden    true        inputElement setAttribute  aria-label    input

User · Answer

uniqueId is custom attribute    lt a        uniqueId      item File UniqueId       href  item File ServerRelativeUrl  target   blank  gt  item File Name  lt  a gt

User · Answer

Depending on what version of React you are using  you may need to use something like this  I know Facebook is thinking about deprecating string refs in the somewhat near future   var Hello   React createClass       componentDidMount  function             ReactDOM findDOMNode this test  setAttribute  custom-attribute    some value               render  function             return  lt div gt               lt span ref   ref    gt  this test   ref  gt Element with a custom attribute lt  span gt           lt  div gt              React render  lt Hello   gt   document getElementById  container       Facebook s ref documentation

User · Answer

if you are using es6 this should work    lt input        customattribute    somevalue       gt

[javascript] How to add custom html attributes in JSX

Examples related to javascript

Examples related to html

Examples related to node.js

Examples related to reactjs

Examples related to react-component