DragToScroll React, КАК?

Question

есть вот такой дизайн

мне нужно DragToScroll вот эту полосу хэштегов(представим, что их там много и они скрылись, как только зашли за красную линию)

контейнер Hashtags - вмещает в себе эти хэштеги

<div className='Hashtags' >
<HashTag HashTag='SEO' />
</div>

css div Hasgtags

.Hashtags{
    display: flex;
    width: 70%;

    overflow-x: hidden;
}

файл Hashtag

import React from 'react'

import './HashTag.css';

function CheckIsHasTag(props){
        if(props.hashtag.includes('#')){
            return(
                <p className='Hashtag'>{props.hashtag}</p>
            )
        }
        else if(!props.hashtag.includes('#')){
            return(
                <p className='Hashtag'>#{props.hashtag}</p>
            )
        }
}

class HashTag extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            hashtag: props.HashTag
        };
    }


    render(){
        return (
                <CheckIsHasTag hashtag={this.state.hashtag}/>
        )
    }
}

export default HashTag

Answer 1

Можно установить готовую версию react-indiana-drag-scroll. При установки на React 18 and npm >= 7 могут быть проблемы, с конфликтом peerDependencies (подробнее тут). Поэтому установить можно, с один из параметров, например: npm i react-indiana-drag-scroll --legacy-peer-deps

<div className="App">
  <ScrollContainer className="scroll-container">
    <div className='item'>item</div>
    <div className='item'>item</div>
    <div className='item'>item</div>
    <div className='item'>item</div>
    <div className='item'>item</div>
    <div className='item'>item</div>
    <div className='item'>item</div>
    <div className='item'>item</div>
    <div className='item'>item</div>
  </ScrollContainer>
</div>
/** styles */
.scroll-container {
  width: 400px;
  display: flex;
}

.item {
  padding: 5px 15px;
  border-radius: 8px;
  background-color: darkorange;
  margin: 4px 10px;
}

БЛОГ НА HUSL

DragToScroll React, КАК?

Ответы (1 шт):