Context
🔢 StepperContext
Context and hook for managing stepper state in React Native Glow UI
⚡️ What it is
- A React context for managing the state of a stepper component
- Provides current value, change handler, and optional min, max, step, disabled, and variant
- Includes a hook (
useStepperContext) for easy access
📝 Context Shape
export interface StepperContextProps {
value: number;
onChange: (newValue: number) => void;
min?: number;
max?: number;
step?: number;
disabled?: boolean;
variant?: "light" | "dark";
}🚀 Usage Example
import {
StepperContext,
useStepperContext,
} from "src/components/molecules/Stepper/context/StepperContext";
import { Button } from "react-native";
function StepperButton() {
const { value, onChange, min, max, step, disabled } = useStepperContext();
return (
<Button
onPress={() => onChange(value + (step || 1))}
title="Next"
disabled={disabled || value >= (max || Infinity)}
/>
);
}🧩 Full Implementation
import { createContext, useContext } from "react";
import type { StepperContextProps } from "./types";
export const StepperContext = createContext<StepperContextProps | undefined>(
undefined,
);
export const useStepperContext = () => {
const context = useContext(StepperContext);
if (!context) {
throw new Error(
"Stepper components must be used within a Stepper component",
);
}
return context;
};💡 Tip
Wrap your stepper-related components in a StepperContext.Provider to share state and logic easily!