@shiguang2/components

Shared React components used by Shiguang applications.

The package keeps TypeScript source in src. The esm and lib builds are generated by Father during CI before publishing. Run npm run verify after changing source.

Components

• Scrollbar: OverlayScrollbars-based scrolling that does not consume layout width.
• XMarkdown: streaming-safe Markdown rendering migrated from @react/x-markdown.

Install

Install the published package from npm:

pnpm add @shiguang2/components

Releases are published by the GitHub Actions workflow when a v* tag is pushed. The npm package must have this repository configured as a Trusted Publisher.

For local development from a sibling project:

{
  "dependencies": {
    "@shiguang2/components": "file:../../../components"
  }
}

Usage

import { Scrollbar, XMarkdown } from '@shiguang2/components';

export function Example() {
  return (
    <Scrollbar style={{ height: 320 }}>
      <XMarkdown>{'# Markdown'}</XMarkdown>
    </Scrollbar>
  );
}

Scrollbar forwards its React ref to the actual scrollable viewport. Use scrollRef when access to the OverlayScrollbars component instance is needed.

All public components are named exports from the package root. The committed lib/<component>/index.js and esm/<component>/index.js files also support on-demand imports with babel-plugin-import:

[
  'import',
  {
    libraryName: '@shiguang2/components',
    libraryDirectory: 'lib',
    camel2DashComponentName: true,
  },
  'shiguang-components',
]

Use libraryDirectory: 'esm' when the consumer build expects ES modules. No separate style import is needed because each component imports its own styles.

License

MIT. See NOTICE.md for the x-markdown migration provenance.