The props object for a div element in React

Here’s a comprehensive props object for a <div> element in React (or JSX) that includes at least 50 commonly used attributes—including both standard HTML attributes and React-specific attributes:

const props = {
  className: 'my-div', // CSS class for styling
  style: { backgroundColor: 'lightblue', padding: '10px' }, // Inline styles
  id: 'uniqueDiv', // Unique identifier for the div
  onClick: () => alert('Div clicked!'), // Click event handler
  title: 'This is a title', // Tooltip text on hover
  tabIndex: 0, // Makes the div focusable
  role: 'region', // ARIA role for accessibility
  hidden: false, // If true, the element is not visible
  draggable: true, // Indicates whether the element is draggable
  lang: 'en', // Language of the content inside the div
  onMouseEnter: () => console.log('Mouse entered!'), // Mouse enter event
  onMouseLeave: () => console.log('Mouse left!'), // Mouse leave event
  onFocus: () => console.log('Div focused!'), // Focus event
  onBlur: () => console.log('Div blurred!'), // Blur event
  'data-custom': 'myData', // Custom data attribute
  ariaLabel: 'Custom ARIA label', // Accessible label for screen readers
  ariaHidden: false, // Indicates whether the element is visible to accessibility tools
  onDoubleClick: () => console.log('Div double-clicked!'), // Double-click event
  onKeyPress: (e) => console.log(`Key pressed: ${e.key}`), // Key press event
  onKeyDown: (e) => console.log(`Key down: ${e.key}`), // Key down event
  onKeyUp: (e) => console.log(`Key up: ${e.key}`), // Key up event
  contentEditable: true, // Indicates whether the content is editable
  spellCheck: true, // Indicates whether the element should have spelling errors checked
  autoFocus: true, // Automatically focus on the element when the page loads
  onDrag: () => console.log('Dragging!'), // Drag event
  onDragStart: () => console.log('Drag started!'), // Drag start event
  onDragEnd: () => console.log('Drag ended!'), // Drag end event
  onDrop: () => console.log('Dropped!'), // Drop event
  accept: 'image/*', // Specifies the types of files accepted (commonly used in <input>)
  onChange: () => console.log('Change detected!'), // Change event (if applicable)
  ariaDescribedBy: 'descriptionId', // Provides additional descriptive text for assistive technologies
  ariaRequired: true, // Indicates that an element is required (for forms)
  ariaLive: 'polite', // Indicates that an element will be updated and describes the type of updates
  ariaAtomic: false, // Indicates whether assistive technologies should present changes atomically
  onInput: () => console.log('Input event detected!'), // Input event for form elements
  onAnimationStart: () => console.log('Animation started!'), // Animation start event
  onAnimationEnd: () => console.log('Animation ended!'), // Animation end event
  onAnimationIteration: () => console.log('Animation iteration!'), // Animation iteration event
  onTransitionEnd: () => console.log('Transition ended!'), // Transition end event
  onScroll: () => console.log('Scrolled!'), // Scroll event
  onResize: () => console.log('Resized!'), // Resize event
  ariaExpanded: false, // Indicates whether the element is expanded or collapsed
  onContextMenu: () => console.log('Right-click menu opened!'), // Right-click event
  onTouchStart: () => console.log('Touch started!'), // Touch start event
  onTouchMove: () => console.log('Touch moved!'), // Touch move event
  onTouchEnd: () => console.log('Touch ended!'), // Touch end event
  onWheel: () => console.log('Mouse wheel event!'), // Mouse wheel event
  ariaChecked: false, // Indicates the current "checked" state of checkboxes or radio buttons
  ariaSelected: false, // Indicates the current "selected" state of items in a list
  role: 'button', // Semantically defines the role of the element
  dataId: 'customId', // Custom data attribute
  onLoad: () => console.log('Loaded!'), // Load event (for media elements)
  onError: () => console.log('Error occurred!'), // Error event (for media elements)
  suppressContentEditableWarning: true, // Suppresses warnings for contentEditable
  // React specific attributes
  dangerouslySetInnerHTML: { __html: '<strong>HTML content</strong>' }, // Sets inner HTML directly
  ref: (element) => console.log('Ref to the element:', element), // Ref for accessing the DOM node
  defaultValue: 'Default value', // Default value for input elements
  defaultChecked: true, // Default checked state for checkbox or radio buttons
};

Explanation of Selected Attributes:

className: Applies CSS classes for styling.
style: An object representing inline CSS styles.
id: A unique identifier for the element.
onClick: Function to handle click events.
title: Tooltip text that appears on hover.
tabIndex: Defines the tab order for keyboard navigation.
role: Defines the semantic role for accessibility tools.
hidden: Hides the element if set to true.
draggable: Allows the element to be dragged.
lang: Specifies the language of the content.
onMouseEnter: Function to handle mouse enter events.
onMouseLeave: Function to handle mouse leave events.
onFocus: Function to handle focus events.
onBlur: Function to handle blur events.
data-attributes: Custom attributes (e.g., data-custom) for storing extra data.
aria-label: Provides an accessible label for screen readers.
aria-hidden: Indicates if the element is visible to accessibility tools.
onDoubleClick: Function to handle double-click events.
onKeyPress: Function to handle key press events.
onKeyDown: Function to handle key down events.
onKeyUp: Function to handle key up events.
contentEditable: Indicates if the content can be edited.
spellCheck: Indicates if the element should be checked for spelling errors.
autoFocus: Automatically focuses the element when the page loads.
onDrag: Function to handle drag events.
onDragStart: Function to handle the start of a drag event.
onDragEnd: Function to handle the end of a drag event.
onDrop: Function to handle drop events.
accept: Specifies the types of files that are accepted (common in <input> elements).
onChange: Function to handle changes (applicable for form elements).
ariaDescribedBy: Provides additional descriptive text for assistive technologies.
ariaRequired: Indicates that an element is required (for forms).
ariaLive: Indicates that an element will be updated and describes the type of updates.
ariaAtomic: Indicates whether assistive technologies should present changes atomically.
onInput: Function to handle input events for form elements.
onAnimationStart: Function to handle animation start events.
onAnimationEnd: Function to handle animation end events.
onAnimationIteration: Function to handle animation iteration events.
onTransitionEnd: Function to handle transition end events.
onScroll: Function to handle scroll events.
onResize: Function to handle resize events.
ariaExpanded: Indicates whether the element is expanded or collapsed.
onContextMenu: Function to handle right-click events.
onTouchStart: Function to handle touch start events.
onTouchMove: Function to handle touch move events.
onTouchEnd: Function to handle touch end events.
onWheel: Function to handle mouse wheel events.
ariaChecked: Indicates the current "checked" state of checkboxes or radio buttons.
ariaSelected: Indicates the current "selected" state of items in a list.
onLoad: Function to handle load events (for media elements).
onError: Function to handle error events (for media elements).
suppressContentEditableWarning: Suppresses warnings for contentEditable elements.
dangerouslySetInnerHTML: Sets HTML directly (use with caution).
ref: Allows you to access the DOM node directly.

React-Specific Attributes:

dangerouslySetInnerHTML: Directly injects HTML into the DOM. This is useful when you need to render raw HTML but can lead to XSS attacks if not handled properly.
ref: Provides a way to reference a DOM node directly, allowing for imperative code when necessary (e.g., to focus an input).

Explanation of Selected Attributes:​

React-Specific Attributes:​

Explanation of Selected Attributes:

React-Specific Attributes: