Skip to main content

The props object for a p element in React

Here's a comprehensive list of at least 50 attributes that can be used with a <p> element in React (JSX), including standard HTML attributes and React-specific attributes:

const props = {
  className: 'my-paragraph', // CSS class for styling
  style: { color: 'blue', fontSize: '16px', lineHeight: '1.5' }, // Inline styles
  id: 'uniqueParagraph', // Unique identifier for the paragraph
  title: 'This is a paragraph title', // Tooltip text on hover
  lang: 'en', // Language of the content
  tabIndex: 0, // Makes the paragraph focusable
  onClick: () => alert('Paragraph clicked!'), // Click event handler
  onMouseEnter: () => console.log('Mouse entered the paragraph!'), // Mouse enter event
  onMouseLeave: () => console.log('Mouse left the paragraph!'), // Mouse leave event
  onFocus: () => console.log('Paragraph focused!'), // Focus event
  onBlur: () => console.log('Paragraph blurred!'), // Blur event
  hidden: false, // If true, the element is not visible
  draggable: false, // Indicates whether the element is draggable
  role: 'document', // ARIA role for accessibility
  'data-custom': 'myCustomData', // 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('Paragraph 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: false, // Indicates whether the content is editable
  spellCheck: true, // Indicates whether the element should have spelling errors checked
  autoFocus: false, // Automatically focus on the element when the page loads
  onScroll: () => console.log('Paragraph scrolled!'), // Scroll event
  onChange: () => console.log('Change detected in paragraph!'), // Change event (if applicable)
  ariaDescribedBy: 'descriptionId', // Provides additional descriptive text for assistive technologies
  ariaRequired: false, // 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
  onContextMenu: () => console.log('Right-click menu opened!'), // Right-click event
  onTouchStart: () => console.log('Touch started on paragraph!'), // Touch start event
  onTouchMove: () => console.log('Touch moved on paragraph!'), // Touch move event
  onTouchEnd: () => console.log('Touch ended on paragraph!'), // Touch end event
  onWheel: () => console.log('Mouse wheel event on paragraph!'), // Mouse wheel event
  suppressContentEditableWarning: true, // Suppresses warnings for contentEditable
  ref: (element) => console.log('Ref to the paragraph element:', element), // Ref for accessing the DOM node
  dangerouslySetInnerHTML: { __html: '<strong>Inner HTML content</strong>' }, // Sets inner HTML directly
  defaultValue: 'Default text', // Default value for input elements (not typically used in <p>)
  defaultChecked: false, // Default checked state for checkbox or radio buttons (not typically used in <p>)
  onLoad: () => console.log('Paragraph content loaded!'), // Load event (for media elements)
  onError: () => console.log('Error occurred in paragraph!'), // Error event (for media elements)
  onAnimationStart: () => console.log('Animation started on paragraph!'), // Animation start event
  onAnimationEnd: () => console.log('Animation ended on paragraph!'), // Animation end event
  onAnimationIteration: () => console.log('Animation iteration on paragraph!'), // Animation iteration event
  onTransitionEnd: () => console.log('Transition ended on paragraph!'), // Transition end event
  dataId: 'customParagraphId', // Custom data attribute
  ariaExpanded: false, // Indicates whether the element is expanded or collapsed
  ariaSelected: false, // Indicates the current "selected" state of items in a list
  wrap: 'soft', // Indicates how text should wrap in the element
  autoComplete: 'on', // Indicates whether to enable autocomplete
  onDrag: () => console.log('Drag event on paragraph!'), // Drag event
  onDragStart: () => console.log('Drag started on paragraph!'), // Drag start event
  onDragEnd: () => console.log('Drag ended on paragraph!'), // Drag end event
  onDrop: () => console.log('Drop event on paragraph!'), // Drop event
  itemScope: true, // Indicates that the element is a part of a microdata item
  itemType: 'http://schema.org/Person', // Specifies the type of item in microdata
  itemProp: 'name', // Specifies the property name in microdata
  ariaInvalid: false, // Indicates the validity of an element
  willChange: 'transform', // Hint to the browser for optimization
  overflow: 'hidden', // CSS overflow property
  inputMode: 'text', // Specifies the type of virtual keyboard to display
  onPointerDown: () => console.log('Pointer down on paragraph!'), // Pointer down event
  onPointerMove: () => console.log('Pointer moved over paragraph!'), // Pointer move event
  onPointerUp: () => console.log('Pointer up on paragraph!'), // Pointer up event
  onPointerCancel: () => console.log('Pointer canceled on paragraph!'), // Pointer cancel event
  onPointerEnter: () => console.log('Pointer entered the paragraph!'), // Pointer enter event
  onPointerLeave: () => console.log('Pointer left the paragraph!'), // Pointer leave event
  onCopy: () => console.log('Content copied from paragraph!'), // Copy event
  onCut: () => console.log('Content cut from paragraph!'), // Cut event
  onPaste: () => console.log('Content pasted into paragraph!'), // Paste event
};

Breakdown of Selected Attributes:​

  1. className: Sets the CSS class for the paragraph element.
  2. style: Inline styles applied directly to the element.
  3. id: A unique identifier for the paragraph.
  4. title: Tooltip text displayed on hover.
  5. lang: Specifies the language for the paragraph content.
  6. tabIndex: Makes the paragraph focusable, enabling keyboard navigation.
  7. onClick: Handler for click events.
  8. role: Defines the semantic role for accessibility.
  9. data-custom: Custom data attribute to store additional data.
  10. aria-label: Provides a label for screen readers, enhancing accessibility.
  11. dangerouslySetInnerHTML: Used to set inner HTML directly (be cautious).
  12. ref: Allows access to the DOM node directly.
  13. suppressContentEditableWarning: Suppresses warnings for contentEditable.
  14. onMouseEnter/Leave: Handlers for mouse entering and leaving the element.
  15. onDoubleClick: Handler for double-click events.
  16. onScroll: Handler for scroll events.
  17. aria-hidden: Indicates if the element is visible to accessibility tools.
  18. contentEditable: Allows content within the paragraph to be editable.
  19. spellCheck: Indicates if spelling should be checked.
  20. onDrag/Drop: Handlers for drag-and-drop events.
  21. itemScope/itemType: Used for microdata, enhancing SEO.
  22. wrap: Defines how text wraps in the paragraph.
  23. onKeyPress/Down/Up: Handlers for keyboard events.
  24. ariaExpanded: Indicates whether the content is expanded or collapsed.
  25. autoComplete: Enables or disables autocomplete.
  26. willChange: Hint for the browser regarding element changes.
  27. inputMode: Specifies the type of virtual keyboard to display.
  28. onPointerDown/Up: Handlers for pointer events.
  29. onCopy/Cut/Paste: Handlers for clipboard events.
  30. onAnimationStart/End: Handlers for CSS animations.

React-Specific Attributes:​

  • dangerouslySetInnerHTML: Used to set inner HTML directly; use cautiously.
  • ref: Allows you to directly reference a DOM node for imperative actions.
  • suppressHydrationWarning: Suppresses warnings related to server-rendered content.

This list includes a wide variety of attributes that you can use with a <p> element in a React application. You can adjust or extend these attributes as needed based on your specific use cases!