Toggle Group
Toggle Group Primitive
Text Component
Terminal window
~/components/ui/toggle-group.tsx
Demo
A collection of buttons with true or false states, which can be activated or deactivated by toggling.
Installation
npx @react-native-reusables/cli@latest add toggle-groupCopy/paste the following code to ~/components/ui/toggle-group.tsx:
import { VariantProps } from 'class-variance-authority';import type { LucideIcon } from 'lucide-react-native';import * as React from 'react';import { toggleTextVariants, toggleVariants } from '~/components/ui/toggle';import { TextClassContext } from '~/components/ui/text';import * as ToggleGroupPrimitive from '~/components/primitives/toggle-group';import { cn } from '~/lib/utils';
const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants> | null>(null);
const ToggleGroup = React.forwardRef< React.ElementRef<typeof ToggleGroupPrimitive.Root>, React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants>>(({ className, variant, size, children, ...props }, ref) => ( <ToggleGroupPrimitive.Root ref={ref} className={cn('flex flex-row items-center justify-center gap-1', className)} {...props} > <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider> </ToggleGroupPrimitive.Root>));
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
function useToggleGroupContext() { const context = React.useContext(ToggleGroupContext); if (context === null) { throw new Error( 'ToggleGroup compound components cannot be rendered outside the ToggleGroup component' ); } return context;}
const ToggleGroupItem = React.forwardRef< React.ElementRef<typeof ToggleGroupPrimitive.Item>, React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>>(({ className, children, variant, size, ...props }, ref) => { const context = useToggleGroupContext(); const { value } = ToggleGroupPrimitive.useRootContext();
return ( <TextClassContext.Provider value={cn( toggleTextVariants({ variant, size }), ToggleGroupPrimitive.utils.getIsSelected(value, props.value) ? 'text-accent-foreground' : 'web:group-hover:text-muted-foreground' )} > <ToggleGroupPrimitive.Item ref={ref} className={cn( toggleVariants({ variant: context.variant || variant, size: context.size || size, }), props.disabled && 'web:pointer-events-none opacity-50', ToggleGroupPrimitive.utils.getIsSelected(value, props.value) && 'bg-accent', className )} {...props} > {children} </ToggleGroupPrimitive.Item> </TextClassContext.Provider> );});
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
function ToggleGroupIcon({ className, icon: Icon, ...props}: React.ComponentPropsWithoutRef<LucideIcon> & { icon: LucideIcon;}) { const textClass = React.useContext(TextClassContext); return <Icon className={cn(textClass, className)} {...props} />;}
export { ToggleGroup, ToggleGroupIcon, ToggleGroupItem };Usage
import * as React from 'react';import { View } from 'react-native';import { Bold, Italic, Underline } from '~/components/Icons';import { ToggleGroup, ToggleGroupIcon, ToggleGroupItem } from '~/components/ui/toggle-group';
function Example() { const [value, setValue] = React.useState<string[]>([]);
return ( <View className='flex-1 justify-center items-center p-6 gap-12'> <ToggleGroup value={value} onValueChange={setValue} type='multiple'> <ToggleGroupItem value='bold' aria-label='Toggle bold'> <ToggleGroupIcon icon={Bold} size={18} /> </ToggleGroupItem> <ToggleGroupItem value='italic' aria-label='Toggle italic'> <ToggleGroupIcon icon={Italic} size={18} /> </ToggleGroupItem> <ToggleGroupItem value='underline' aria-label='Toggle underline'> <ToggleGroupIcon icon={Underline} size={18} /> </ToggleGroupItem> </ToggleGroup> </View> );}Props
ToggleGroup
Extends View props
| Prop | Type | Note |
|---|---|---|
| type | ’single’ | ‘multiple’ | |
| value | string | undefined | string[] | |
| onValueChange | (val: string | undefined | string[]) => void | |
| asChild | boolean | (optional) |
| disabled | boolean | (optional) |
| rovingFocus | boolean | Web only (optional) |
| orientation | ’horizontal’ | ‘vertical’ | Web only (optional) |
| dir | ’ltr’ | ‘rtl’ | Web only (optional) |
| ltr | boolean | Web only (optional) |
ToggleGroupItem
Extends Pressable props
| Prop | Type | Note |
|---|---|---|
| value | string | |
| asChild | boolean | (optional) |
| variant | ’default’ | ‘outline’ | (optional) |
| size | ’default’ | ‘sm’ | ‘lg’ | (optional) |
ToggleIcon
Extends LucideIcon props
| Prop | Type | Note |
|---|---|---|
| icon | LucideIcon |