no-adjacent-inline-elements

Keywords: React, JSX, inline elements, layout, accessibility, spacing, ESLint rule, LLM-optimized

Prevents adjacent inline elements without proper spacing or wrapping. This rule is part of eslint-plugin-react-features and provides LLM-optimized error messages.

Quick Summary

Aspect	Details
Severity	Warning (layout best practice)
Auto-Fix	❌ No (requires layout refactoring)
Category	React
ESLint MCP	✅ Optimized for ESLint MCP integration
Best For	Proper spacing, accessible layouts

Rule Details

Inline Elements Detected

Element	Type
`<span>`	Inline
`<a>`	Inline
`<strong>`, `<em>`, `<b>`, `<i>`	Inline
`<code>`, `<kbd>`, `<samp>`	Inline
`<abbr>`, `<cite>`, `<q>`	Inline
`<time>`, `<mark>`	Inline
`<sub>`, `<sup>`	Inline
`<small>`, `<del>`, `<ins>`	Inline

Why This Matters

Issue	Impact	Solution
📐 Layout Issues	Elements may touch	Add spacing or wrapper
♿ Accessibility	Screen readers may run together	Proper semantic structure
🎨 Styling	Hard to apply consistent styles	Use flex/grid containers
📱 Responsiveness	Unpredictable line breaks	Control with block containers

Examples

❌ Incorrect

<div><em>Hello</em><b>World</b></div>

✅ Correct

// Separated by text
function Tags() {
  return (
    <div>
      <span>Tag1</span> | <span>Tag2</span> | <span>Tag3</span>
    </div>
  );
}

// Wrapped in list
function Links() {
  return (
    <nav>
      <ul>
        <li><a href="/home">Home</a></li>
        <li><a href="/about">About</a></li>
      </ul>
    </nav>
  );
}

// With proper spacing
function Text() {
  return (
    <p>
      <strong>Bold</strong> <em>Italic</em>
    </p>
  );
}

// Using flex container
function TagList() {
  return (
    <div style={{ display: 'flex', gap: '8px' }}>
      <span>Tag1</span>
      <span>Tag2</span>
      <span>Tag3</span>
    </div>
  );
}

Configuration

{
  rules: {
    'react-features/no-adjacent-inline-elements': 'warn'
  }
}

Proper Patterns

Problem	Solution
Adjacent `<span>`s	Flexbox with gap
Adjacent `<a>`s	List structure `<ul><li>`
Adjacent formatting	Add space between: `text {" "} text`
Adjacent badges	Use CSS gap or margin

Using CSS Gap

// Correct with CSS
const styles = {
  container: {
    display: 'flex',
    gap: '8px'
  }
};

function TagList({ tags }) {
  return (
    <div style={styles.container}>
      {tags.map(tag => (
        <span key={tag}>{tag}</span>
      ))}
    </div>
  );
}

Using JSX Spacing

// Explicit space between elements
function Breadcrumbs({ items }) {
  return (
    <nav>
      {items.map((item, index) => (
        <React.Fragment key={item.path}>
          {index > 0 && ' / '}
          <a href={item.path}>{item.label}</a>
        </React.Fragment>
      ))}
    </nav>
  );
}

jsx-max-depth - Limit JSX nesting
no-children-prop - Proper children handling

Known False Negatives

The following patterns are not detected due to static analysis limitations:

Dynamic Variable References

Why: Static analysis cannot trace values stored in variables or passed through function parameters.

// ❌ NOT DETECTED - Prop from variable
const propValue = computedValue;
<Component prop={propValue} /> // Computation not analyzed

Mitigation: Implement runtime validation and review code manually. Consider using TypeScript branded types for validated inputs.

Wrapped or Aliased Functions

Why: Custom wrapper functions or aliased methods are not recognized by the rule.

// ❌ NOT DETECTED - Custom wrapper
function myWrapper(data) {
  return internalApi(data); // Wrapper not analyzed
}
myWrapper(unsafeInput);

Mitigation: Apply this rule's principles to wrapper function implementations. Avoid aliasing security-sensitive functions.

Imported Values

Why: When values come from imports, the rule cannot analyze their origin or construction.

// ❌ NOT DETECTED - Value from import
import { getValue } from './helpers';
processValue(getValue()); // Cross-file not tracked

Mitigation: Ensure imported values follow the same constraints. Use TypeScript for type safety.