core/coverage.d.ts

@@ -2,8 +2,10 @@ declare module '@uiw/react-shields/coverage' {
   import Container from '@uiw/react-shields/esm/common/Container';
   import Coverages from '@uiw/react-shields/esm/coverages/Coverages';
   import Codacy from '@uiw/react-shields/esm/coverages/Codacy';
-  export default class Coverage extends Container {
-    static Coverages: typeof Coverages;
-    static Codacy: typeof Codacy;
-  }
+  type CoverageComponent = typeof Container & {
+    Coverages: typeof Coverages;
+    Codacy: typeof Codacy;
+  };
+  const Coverage: CoverageComponent;
+  export default Coverage;
 }

core/github.d.ts

@@ -8,14 +8,16 @@ declare module '@uiw/react-shields/github' {
   import License from '@uiw/react-shields/esm/github/License';
   import Analysis from '@uiw/react-shields/esm/github/Analysis';
   import Social from '@uiw/react-shields/esm/github/Social';
-  export default class Github extends Container {
-    static Issues: typeof Issues;
-    static Size: typeof Size;
-    static Activity: typeof Activity;
-    static Downloads: typeof Downloads;
-    static Version: typeof Version;
-    static License: typeof License;
-    static Analysis: typeof Analysis;
-    static Social: typeof Social;
-  }
+  type GithubComponent = typeof Container & {
+    Issues: typeof Issues;
+    Size: typeof Size;
+    Downloads: typeof Downloads;
+    License: typeof License;
+    Activity: typeof Activity;
+    Analysis: typeof Analysis;
+    Version: typeof Version;
+    Social: typeof Social;
+  };
+  const Github: GithubComponent;
+  export default Github;
 }

core/npm.d.ts

@@ -3,9 +3,11 @@ declare module '@uiw/react-shields/npm' {
   import Version from '@uiw/react-shields/esm/npm/Version';
   import Size from '@uiw/react-shields/esm/npm/Size';
   import Downloads from '@uiw/react-shields/esm/npm/Downloads';
-  export default class Npm extends Container {
-    static Version: typeof Version;
-    static Size: typeof Size;
-    static Downloads: typeof Downloads;
-  }
+  type NpmComponent = typeof Container & {
+    Version: typeof Version;
+    Size: typeof Size;
+    Downloads: typeof Downloads;
+  };
+  const Npm: NpmComponent;
+  export default Npm;
 }

core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-shields",
-  "version": "1.3.3",
+  "version": "2.0.0",
   "description": "Shields.io for react component, Quality metadata badges for open source projects.",
   "author": "Kenny Wong <wowohoo@qq.com>",
   "license": "MIT",
@@ -18,19 +18,19 @@
       "types": "./esm/index.d.ts"
     },
     "./npm": {
-      "import": "./esm/npm/Npm.js",
-      "require": "./cjs/npm/Npm.js",
-      "types": "./esm/npm/Npm.d.ts"
+      "import": "./esm/npm/index.js",
+      "require": "./cjs/npm/index.js",
+      "types": "./esm/npm/index.d.ts"
     },
     "./github": {
-      "import": "./esm/github/Github.js",
-      "require": "./cjs/github/Github.js",
-      "types": "./esm/github/Github.d.ts"
+      "import": "./esm/github/index.js",
+      "require": "./cjs/github/index.js",
+      "types": "./esm/github/index.d.ts"
     },
     "./coverage": {
-      "import": "./esm/coverages/Coverage.js",
-      "require": "./cjs/coverages/Coverage.js",
-      "types": "./esm/coverages/Coverage.d.ts"
+      "import": "./esm/coverages/index.js",
+      "require": "./cjs/coverages/index.js",
+      "types": "./esm/coverages/index.d.ts"
     }
   },
   "files": [

core/src/common/Base.tsx

@@ -1,42 +1,28 @@
-import React, { Component } from 'react';
+import React from 'react';
 import type { AnchorHTMLAttributes, ImgHTMLAttributes } from 'react';
 
-export interface BaseProps extends ImgHTMLAttributes<HTMLImageElement> {
+export interface InternalProps extends ImgHTMLAttributes<HTMLImageElement> {
   platform?: 'github' | 'coveralls' | 'npm';
   type?: string;
   user?: string;
   repo?: string;
   base?: string;
+  imgSrc?: string;
   href?: HTMLAnchorElement['href'];
   children?: React.ReactNode;
   anchor?: Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
 }
-export interface BaseState extends BaseProps {}
 
-export default class Base<T> extends Component<BaseProps & T, BaseState & T> {
-  static defaultProps: BaseProps = {
-    platform: 'github',
-    base: 'https://img.shields.io',
-  };
-  constructor(props: BaseProps & T, defaultState: BaseProps & T, forceState?: BaseProps & T) {
-    super(props);
-    this.state = Object.assign({}, { ...defaultState, ...props }, forceState);
+export const Internal = React.forwardRef<HTMLImageElement, InternalProps>((props, ref) => {
+  const { href, anchor = {}, imgSrc, platform, type, user, repo, base, children, ...other } = props;
+  if (href) {
+    return (
+      <a {...anchor} href={href}>
+        <img alt="" ref={ref} src={imgSrc} {...other} />
+      </a>
+    );
   }
-  componentDidUpdate(prevProps: Readonly<BaseProps & T>, prevState: Readonly<BaseState & T>, snapshot?: any): void {
-    if (prevProps !== this.props) {
-      this.setState({ ...this.state, ...this.props });
-    }
-  }
-  getUrl = () => '';
-  render() {
-    const { href, anchor, ...other } = this.state;
-    if (href) {
-      return (
-        <a {...anchor} href={href}>
-          <img alt="" src={this.getUrl()} {...other} />
-        </a>
-      );
-    }
-    return <img alt="" src={this.getUrl()} {...other} />;
-  }
-}
+  return <img alt="" ref={ref} src={imgSrc} {...other} />;
+});
+
+Internal.displayName = 'Internal';

core/src/common/Container.tsx

@@ -1,17 +1,13 @@
-import React, { Component, ReactElement } from 'react';
-import { BaseProps } from '../common/Base';
+import React, { ReactElement } from 'react';
+import { InternalProps } from '../common/Base';
 
-export interface ContainerProps extends BaseProps {}
+export interface ContainerProps extends InternalProps {}
 
-export default class Container extends Component<ContainerProps> {
-  render() {
-    return (
-      <>
-        {React.Children.toArray(this.props.children).map((child: React.ReactNode) => {
-          if (!React.isValidElement(child)) return null;
-          return React.cloneElement(child as ReactElement, { ...this.props, ...(child as React.ReactElement).props });
-        })}
-      </>
-    );
-  }
+export default function Container(props: ContainerProps) {
+  return React.Children.toArray(props.children).map((child: React.ReactNode) => {
+    if (!React.isValidElement(child)) return null;
+    return React.cloneElement(child as ReactElement, { ...props, ...(child as React.ReactElement).props });
+  });
 }
+
+Container.displayName = 'Container';

core/src/coverages/Codacy.tsx

@@ -1,6 +1,7 @@
-import Base, { BaseProps } from '../common/Base';
+import React from 'react';
+import { Internal, type InternalProps } from '../common/Base';
 
-export interface CodacyProps extends BaseProps {
+export interface CodacyProps extends InternalProps {
   /**
    * Codacy Coverage
    *
@@ -14,18 +15,16 @@ export interface CodacyProps extends BaseProps {
   branch?: string;
 }
 
-export default class Codacy extends Base<CodacyProps> {
-  static defaultProps: BaseProps = {
-    platform: 'coveralls',
-    base: 'https://img.shields.io',
-  };
-  constructor(props: CodacyProps) {
-    super(props, {}, { platform: 'coveralls' });
-  }
-  getUrl = () => {
-    const { base, platform, projectId, branch } = this.state;
+const Codacy = React.forwardRef<HTMLImageElement, CodacyProps>((props, ref) => {
+  const { platform = 'coveralls', base = 'https://img.shields.io', projectId, branch, ...other } = props;
+  const getUrl = () => {
     if (platform !== 'coveralls') return '';
     if (branch) return [base, platform, projectId, branch].join('/');
     return [base, 'codacy/coverage', projectId].join('/');
   };
-}
+  return <Internal imgSrc={getUrl()} ref={ref} {...other} />;
+});
+
+Codacy.displayName = 'Codacy';
+
+export default Codacy;

core/src/coverages/Coverages.tsx

@@ -1,6 +1,7 @@
-import Base, { BaseProps } from '../common/Base';
+import React from 'react';
+import { Internal, type InternalProps } from '../common/Base';
 
-export interface CoveragesProps extends BaseProps {
+export interface CoveragesProps extends InternalProps {
   /**
    * Code Coverage
    *
@@ -20,17 +21,15 @@ export interface CoveragesProps extends BaseProps {
   branch?: string;
 }
 
-export default class Coverages extends Base<CoveragesProps> {
-  static defaultProps: BaseProps = {
-    platform: 'coveralls',
-    base: 'https://img.shields.io',
-  };
-  constructor(props: CoveragesProps) {
-    super(props, { type: 'github' }, { platform: 'coveralls' });
-  }
-  getUrl = () => {
-    const { type, platform, user, repo, base } = this.state;
+const Coverages = React.forwardRef<HTMLImageElement, CoveragesProps>((props, ref) => {
+  const { type = 'github', platform = 'coveralls', base = 'https://img.shields.io', user, repo, ...other } = props;
+  const getUrl = () => {
     if (platform !== 'coveralls') return '';
     return [base, platform, type, user, repo].join('/');
   };
-}
+  return <Internal imgSrc={getUrl()} ref={ref} {...other} />;
+});
+
+Coverages.displayName = 'Coverages';
+
+export default Coverages;

core/src/coverages/index.tsx

@@ -1,3 +1,15 @@
-import Coverage from './Coverage';
+import Container, { ContainerProps } from '../common/Container';
+import Coverages from './Coverages';
+import Codacy from './Codacy';
+
+type CoverageComponent = typeof Container & {
+  Coverages: typeof Coverages;
+  Codacy: typeof Codacy;
+};
+
+const Coverage = (props: ContainerProps) => (<Container {...props} />) as unknown as CoverageComponent;
+Coverage.Coverages = Coverages;
+Coverage.Codacy = Codacy;
+Coverage.displayName = 'Github';
 
 export default Coverage;

core/src/github/Activity.tsx

@@ -1,6 +1,7 @@
-import Base, { BaseProps } from '../common/Base';
+import React from 'react';
+import { Internal, type InternalProps } from '../common/Base';
 
-export interface ActivityProps extends BaseProps {
+export interface ActivityProps extends InternalProps {
   /**
    * `/github/commit-activity/:interval/:user/:repo`
    * GitHub commit activity: GitHub commit activity badge
@@ -39,12 +40,20 @@ export interface ActivityProps extends BaseProps {
   branch?: string;
 }
 
-export default class Activity extends Base<ActivityProps> {
-  constructor(props: ActivityProps) {
-    super(props, { platform: 'github', type: 'commits-since' });
-  }
-  getUrl = () => {
-    const { type, platform, user, repo, base, interval, variant, version, branch } = this.state;
+const Activity = React.forwardRef<HTMLImageElement, ActivityProps>((props, ref) => {
+  const {
+    platform = 'github',
+    base = 'https://img.shields.io',
+    type = 'commits-since',
+    user,
+    repo,
+    interval,
+    variant,
+    version,
+    branch,
+    ...other
+  } = props;
+  const getUrl = () => {
     if (platform !== 'github') return '';
     if (type === 'commits-since' && version && branch) {
       return [base, platform, type, user, repo, version, branch].join('/');
@@ -65,4 +74,9 @@ export default class Activity extends Base<ActivityProps> {
     }
     return '';
   };
-}
+  return <Internal imgSrc={getUrl()} ref={ref} {...other} />;
+});
+
+Activity.displayName = 'Activity';
+
+export default Activity;

core/src/github/Analysis.tsx

@@ -1,6 +1,7 @@
-import Base, { BaseProps } from '../common/Base';
+import React from 'react';
+import { Internal, type InternalProps } from '../common/Base';
 
-export interface AnalysisProps extends BaseProps {
+export interface AnalysisProps extends InternalProps {
   /**
    * Github Analysis
    *
@@ -17,12 +18,17 @@ export interface AnalysisProps extends BaseProps {
   query?: string;
 }
 
-export default class Analysis extends Base<AnalysisProps> {
-  constructor(props: AnalysisProps) {
-    super(props, { platform: 'github', type: 'languages-count' });
-  }
-  getUrl = () => {
-    const { base, platform, type, user, repo, query } = this.state;
+const Analysis = React.forwardRef<HTMLImageElement, AnalysisProps>((props, ref) => {
+  const {
+    platform = 'github',
+    type = 'languages-count',
+    base = 'https://img.shields.io',
+    user,
+    repo,
+    query,
+    ...other
+  } = props;
+  const getUrl = () => {
     let typePath = '';
     switch (type) {
       case 'languages-count':
@@ -44,4 +50,9 @@ export default class Analysis extends Base<AnalysisProps> {
     }
     return baseData.join('/');
   };
-}
+  return <Internal imgSrc={getUrl()} ref={ref} {...other} />;
+});
+
+Analysis.displayName = 'Analysis';
+
+export default Analysis;