PageStatsCounterSection

A reusable statscountersection component for React applications.

Installation

npm install @pagedotapp/page-stats-counter-section

Usage

import { PageStatsCounterSection } from "@pagedotapp/page-stats-counter-section"

function App() {
	return (
		<PageStatsCounterSection variant="primary" size="medium">
			PageStatsCounterSection Content
		</PageStatsCounterSection>
	)
}

Props

| Prop | Type | Default | Description | | ----------- | --------------------------------------- | ----------- | ------------------------- | | children | React.ReactNode | - | Component children | | className | string | '' | Additional CSS class name | | variant | 'default' \| 'primary' \| 'secondary' | 'default' | Component variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Component size | | disabled | boolean | false | Disabled state |

Examples

Variants

<PageStatsCounterSection variant="default">Default</PageStatsCounterSection>
<PageStatsCounterSection variant="primary">Primary</PageStatsCounterSection>
<PageStatsCounterSection variant="secondary">Secondary</PageStatsCounterSection>

Sizes

<PageStatsCounterSection size="small">Small</PageStatsCounterSection>
<PageStatsCounterSection size="medium">Medium</PageStatsCounterSection>
<PageStatsCounterSection size="large">Large</PageStatsCounterSection>

States

<PageStatsCounterSection disabled>Disabled</PageStatsCounterSection>

Styling

The component uses CSS modules for styling. You can override styles by passing a custom className or by targeting the component's CSS classes in your global styles.

Development

To run the component in development mode:

npm run storybook

To run tests:

npm run test

To lint the component:

npm run lint