Option Selector Sample

A React component demonstrating an interactive option selector with customizable options and styling. This component provides a flexible way to present and select from a list of options with visual feedback.

Demo

Features

• Multiple Selection Modes: Support for both single and multiple selection
• Customizable Layout: Vertical or horizontal layout options
• Visual Feedback: Clear indication of selected options with checkmarks
• Responsive Design: Adapts to container size
• Interactive Hover States: Visual feedback on hover
• Customizable Styling: SCSS-based styling with easy customization

Installation

# Clone the repository
git clone [repository-url]

# Install dependencies
npm install

# Start the development server
npm run dev

Example Usage

import { OptionSelector } from './OptionSelector';

// Sample options data
const options = [
  { value: 'happy', text: 'Happy' },
  { value: 'pleased', text: 'Pleased' },
  { value: 'sad', text: 'Sad' }
];

// Rendering the option selector
const OptionSelectorDemo = () => {
  const [selected, setSelected] = React.useState('happy');
  
  const handleSelect = (e, value) => {
    setSelected(value);
  };
  
  return (
    <OptionSelector 
      selected={selected}
      onSelect={handleSelect}
      options={options}
      layout="vertical" // or "horizontal"
    />
  );
};

Data Structure

The option selector expects options in the following format:

{
  value: string,    // Unique identifier for the option
  text: string      // Display text for the option
}

Component Props

Prop	Type	Required	Description
options	Array	Yes	Array of option objects
selected	String/Array	Yes	Currently selected value(s)
onSelect	Function	Yes	Callback for option selection
layout	String	No	Layout direction ('vertical' or 'horizontal')

Styling

The component uses SCSS for styling with the following features:

.option-selector {
    display: flex;

    &.horizontal {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    &.vertical {
        flex-direction: column;
    }

    .option {
        cursor: pointer;
        background-color: #f89c13;
        color: #fff;
        padding: 2px 4px;
        margin: 3px;
        width: max-content;
        border-radius: 5px;

        &.selected {
            background-color: adjust-color(palevioletred, $lightness: -15%);
        }

        &:hover {
            background-color: palevioletred;
        }
    }
}

Technologies Used

• React: Component-based UI development
• SCSS: Styling and layout
• @phosphor-icons/react: Icon library for checkmarks
• Ant Design: UI components for demo layout

Development

This project uses Vite for development. To get started:

1. Clone the repository
2. Install dependencies with npm install
3. Start the development server with npm run dev
4. Open your browser to http://localhost:5173

Building for Production

npm run build

The build artifacts will be stored in the dist/ directory.

License

MIT