sb-framer-counter v1.0.5

📖 Table of Contents

• 🚀 Getting Started
  • 🐇 Jump Start
  • 💻 Live Demo
• ⚙️ Configuration
• ♿️ Accessibility
• 👨🏼‍⚖️ License

🚀 Getting Started

🐇 Jump Start

With NPM:

npm i sb-framer-counter

With Yarn:

yarn add sb-framer-counter

import { useState } from "react";
import { FramerCounter } from "sb-framer-counter";

function Example() {
	const [value, setValue] = useState(10);
	return (
		<FramerCounter
			minimumValue={10}
			maximumValue={100}
			stepValue={10}
			initialValue={0}
			size="md"
			inactiveTrackColor="#fed7aa"
			activeTrackColor="#fddec0"
			activeButtonColor="#ffedd5"
			inactiveIconColor="#fb923c"
			hoverIconColor="#ea580c"
			activeIconColor="#9a3412"
			disabledIconColor="#fdba74"
			thumbColor="#f97316"
			thumbShadowAnimationOnTrackHoverEnabled={false}
			focusRingColor="#fff7ed"
			onChange={(value) => {
				setValue(value);
			}}
		/>
	);
}

💻 Live Demo

⚙️ Configuration

FramerCounter supports the following props:

In order to customise the thumb's font settings, we can use CSS, like so:

[data-testid="framer-counter-thumb"] {
	font-family: "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: 800;
}

♿️ Accessibility

In order to comply with the web accessibility standards, we must make use of the decrementButtonAriaLabel and incrementButtonAriaLabel props, like so:

function AccessibleExample() {
	return <FramerCounter decrementButtonAriaLabel="Decrement" incrementButtonAriaLabel="Increment" />;
}

Also, we can use a thumbAriaLabel prop to provide a description for the value rendered inside a thumb, like so:

function EnhancedThumbAccessibilityExample() {
	const [value, setValue] = useState(0);
	return (
		<FramerCounter
			thumbAriaLabel={`${value} items`}
			onChange={(value) => {
				setValue(value);
			}}
		/>
	);
}

👨🏼‍⚖️ License

MIT