import Select from 'react-select'
<Select
isMulti // разрешить множественный выбор
placeholder="Choose country" // текст в поле если пусто
closeMenuOnSelect={true} // разрешать кнопку удаления тегов внутри инпут
value={countryOptions.find(obj => obj.value === select)} // тут выбранные страны
defaultValue={select} // тут из стейта по умолчанию
name="country" // имя селекта
onChange={handleChange} // сюда можно вставить функцию которая будет следить за событиями
options={countryOptions} // массив данных, откуда выбираются страны
styles={countryStyles} // стилистика, цвета и размеры
/>
const [select, setSelect] = useState([countryOptions[0], countryOptions[7]])
setSelect()
поможет мутировать стейт.select
.- const onMouseKidsEnter = () => {
- setIsOpen('kids')
- }
- const onMouseWomenEnter = () => {
- setIsOpen('women')
- }
- const onMouseMenEnter = () => {
- setIsOpen('men')
- }
+ const onMouseParamEnter = (param) => {
+ setIsOpen(param);
+ }
<LeftBar>
- <LeftBarItem onMouseEnter={onMouseKidsEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('kids')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'kids'}>
<span>Kids</span>
<IoIosArrowBack />
</LeftBarItem>
- <LeftBarItem onMouseEnter={onMouseWomenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('women')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'women'}>
<span>Women</span>
<IoIosArrowBack />
</LeftBarItem>
- <LeftBarItem onMouseEnter={onMouseMenEnter} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
+ <LeftBarItem onMouseEnter={() => onMouseParamEnter('men')} onMouseLeave={onMouseLeave} isOpen={isOpen === 'men'}>
<span>Men</span>
<IoIosArrowBack />
</LeftBarItem>
</LeftBar>
<LeftBarItem>
вынести в отдельный компонент и передавать туда нужный props с параметром kids/women/men import { Normalize } from 'styled-normalize'
<Normalize />
<App />
Safari и Chrome для мобильных устройств внесли изменения в то, как действует видео на мобильных устройствах
require
. Тебе нужно прописать путь строкой. Путь должен быть относительно папки public (это корневая папка для приложения). ffmpeg -i input_video_file.mp4 -vcodec copy -acodec copy -movflags faststart output_video_file.mp4
let isValid = {
telegram: false,
email: false,
phone: false
};
const validTelegramNickname = /^[A-Za-z\d_]{5,32}$/;
Знаю что react не подойдет в этой ситуации
transform: skew, translate