/faircopy

React adapter

Extract prose from .tsx and .jsx React files.

@faircopy/react extracts prose from React .tsx and .jsx files using @babel/parser. It walks the JSX AST and emits text nodes, string expression literals, and prose-named prop values.

Install

npm install -D @faircopy/react

Usage

import { react } from '@faircopy/react'
import { defineConfig } from '@faircopy/config'

export default defineConfig({
  files: ['src/**/*.{tsx,jsx}'],
  adapters: [react()],
  rules: {
    'no-em-dash': 'error',
    'no-weasel-words': 'error',
    'no-rhetorical-scaffolding': 'error',
  },
})

What gets extracted

  • JSX text nodes: <h1>This text</h1>
  • String expression containers: <p>{'This string'}</p>
  • Prose-named prop values: label="Click", alt="A photo", aria-label="Close"

Default prose props: label, placeholder, alt, title, aria-label, aria-description, tooltip, description.

Options

react({
  lintExpressionStrings: true,
  lintProseProps: { props: ['label', 'subtitle', 'cta'] },
  skipTags: ['SyntaxHighlighter'], // extra tags to skip
})

Ignoring sections

Add data-faircopy-ignore as a JSX attribute to any element and its subtree skips linting.

<article data-faircopy-ignore>
  <p>Not linted.</p>
</article>