react-image-zoom/example/components/option/Option.js

react based image zoomer on mouse hover

import React from 'react';
import PropTypes from 'prop-types';
import './styles.scss';
import {StoreContext, UPDATE_OPTIONS} from '../../reducer';

export function Option({name, options}) {

  const {dispatch} = React.useContext(StoreContext);

  const onRadioBtnChange = (e) => {
    const newOptions = {...options};
    Object.keys(newOptions).forEach((key) => {
      newOptions[key].checked = false;
    });
    newOptions[e.target.value].checked = true;
    dispatch({
      type: UPDATE_OPTIONS, payload: {
        key: name,
        value: newOptions,
      },
    });
  };

  const renderOption = ({key, value, checked}) => (
      <label key={value} className='option__property'>
        <input type="radio" id={key} name={key} value={value} checked={checked} onChange={onRadioBtnChange}/>
        <div className='option__property_caption'>{value}</div>
      </label>
  );

  return (
    <div className='option'>
      <div className='option__name'>
        {`${name}: `}
      </div>
      <div className='option__options'>
        {Object.keys(options).map((key) => renderOption(options[key]))}
      </div>
    </div>
  );

}

Option.propTypes = {
  name: PropTypes.string.isRequired,
  options: PropTypes.object.isRequired,
};