Show Scrollbar of component A in Component B - javascript

I have two components like this.
<ComponentA />
<ComponentB />
Where component A will be horizontally scrollable but i want to show its scrollbar in component B.
<ComponentA >
some content over here which is wide enough to get horizontal scroll
</ComponentA>
<ComponentB>
some content
//scrollbar of ComponentA
more content
</ComponentB>
Hope i made the problem clear :)
I guess i can use useRef but don't know how in this scenario

I am newbie i hope i understand your question and i try my best.
use overflow-x/overflow-y: scroll;
so you can easily get a scrollbar in component A, but this will always visible.

Related

How to make react-window FixedSizeList scroll with the viewport instead of the component's scroll bar?

I am trying to integrate react-window's FixedSizeList and FixedSizeGrid components to increase the initial rendering speed of my page. Is there some way for me to let the user scroll down the react-window component using the viewport's scrolling area? I was also
wondering if there is some way to remove the scrollbar from the react-window component and only use the viewport's scrolling as I described above.
I tried integrating the documentation version of FixedSizeList into my page and as you can see, since the total height of all my rows is greater than the height I specified in the component so the vertical scrollbar beside the component appears, which I want to remove. I also cannot figure out how to let scrolling downwards on the viewport make the react-window component scroll down the rest of its rows.
From looking online, I think I might need to modify the CSS style of the FixedSizeList to have overflow:hidden to remove the scrollbar but how can I ensure that I keep the scrolling functionality and that the user can scroll down the component from anywhere in the viewport?
Current version with no react-window
FixedSizeList version
const Row = ({ index, style }) => (
<div style={style}>Row {index}</div>
);
<FixedSizeList
height={500}
itemCount={38}
itemSize={35}
width={"100%"}
>
{Row}
</FixedSizeList>
One solution is to use a package linked from the react-window github page called react-virtualized-auto-sizer. It is also made by bvaughn and is a good solution to the problem.
This solves the issue by allowing you to set the height of your FixedSizedList to the height of its content, so it does not get a scrollbar. Here's how that would look:
<AutoSizer>
{({ height, width }) => (
<FixedSizeList
className="List"
height={height}
itemCount={1000}
itemSize={35}
width={width}
>
{Row}
</FixedSizeList>
)}
</AutoSizer>
Here's a full example on codesandbox:

How to smooth scroll to each component of my page without using any anchor

I want to implement smooth scrolling behaviouur on my html page, which is build of react components. Each component has a height of 100vh. I have seen many smooth scrolling tutorials and blogs which involves smooth scroll with the help of navbar tags or some anchor tags. I dont want to use any sort of anchor tag.
My question is how can I smooth scroll between components of my page using scrollbar. i.e if someone scrolls down, the page must smooth scroll to next component instead of hanging in between components and so on.
These are my components
render() {
console.log(this.props);
if(this.props.HomeHeroSec)
{
return (
<div className={classes.containerclass}>
<HomeSec1 className={classes.section} herodata={this.props.HomeHeroSec} />
<HomeSec3 className={classes.section} cradata={this.props.HomeCrausal} />
<AboutSec6 className={classes.section}/>
<HomeSec4 className={classes.section} secData={this.props.HomeHeroSec} />
<Footer />
</div>
)
}
react-scroll package may help you to have a smooth scroll. https://www.npmjs.com/package/react-scroll

Semantic UI React - Adding Reveal Effect to Images in Cards

The title says it all.
Is it possible to add the Semantic UI Reveal effect to Images in Cards?
This would be a very nice feature when designing ecommerce websites with Semantic UI + React, for example for having two images for each product, when hovering.
Moreover, when using Semantic UI without React, it is totally possible.
It seems like the React component has a bug where its not specifying the width of the "visible" element in the Reveal. The "hidden" element does have a width of "100%" specified.
See that offset?
So, when we add that in, the positioning of the "visible" component correctly overlays the "hidden" as demo'd in this codesandbox:
https://codesandbox.io/s/v8mylv1p3
Alternatively, if you had the images formatted to take up full-width to begin with, then it probably works fine.
I answer myself because I have found a (not very smart, I admit it) workaround for this problem. Currently, it is working with the following versions of Semantic UI + Semantic UI React.
Last update in March 2018:
"semantic-ui": "^2.3.1",
"semantic-ui-react": "^0.79.0"
In my component, I simply get rid of the direct <Image> or <Reveal> components and use a plain <div> JSX component (containing two Images to emulate the Reveal behaviour):
...
<Card>
<div className={'ui slide masked reveal image'}>
<Image src='/img/products/1.jpg' className={'visible content'} />
<Image src='/img/products/2.jpg' className={'hidden content'} />
</div>
<Card.Content>
<Card.Header textAlign={'center'}>
Product name
</Card.Header>
...
This results in a minimum impact with the desired funcionality :)

component design in react, where to put the 'full height'?

After using react (actually the ClojureScript wrapper reagent) for a while now, I'm still not sure what's the best way to solve the following problem:
Say you'd have a Root component:
class Root extends React.Component {
render() {
return (
<div style="display: flex">
<div style="flex: 2 1">
<Content></Content>
</div>
<div style="flex: 1 1">
<Menu></Menu>
</div>
</div>
);
}
}
This separates the screen vertically into a bigger content section and a smaller menu section. I'd say this separation is clearly something the Root component should take care of. The Menu component itself might be used in another context in which the flex props don't make any sense.
class Menu extends React.Component {
render() {
return (
<div style="background-color: red">
Buttons, etc...
</div>
);
}
The menu however has some properties which belong definitely there: like for instance the background color. But if we run this example we'll notice that the background color does not fill the 'menu' area defined in the Root components. That's because its lacking a some height/width = "100%" style properties.
I see two ways to solve that: Either put them inside the Menu component. But this might as well not be intended in other uses of the component. If someone wants to use Menu not in it's full height it would have to be wrapped again.
Or, pass the width and height as props to the component, that's also quite some overhead...
Usually menu's are not reused that much, but this pattern arises in many other situations. What's the way to go here? Is there maybe a third way to do this?
EDIT/NOTE:
Maybe transferPropsTo is what I need, but I'd still leave this to discussion...
Is the align-items flexbox CSS prop of any use here?
https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-7

How to have custom component as title of NavBar in react-native-router-flux?

By default, I can only have a single line of text in the title of the NavBar with react-native-router-flux.
I want to have 2 lines of text in the title of the NavBar. Thus, how can I actually have a custom component as the title of the NavBar in react-native-router-flux?
As described on the documentation, you can pass a custom NavBar to your Scene or Router.
<Scene key="about" component={AboutScreen} navBar={()=>{return <CustomNavBar/>} />
Unfortunately, you cannot have a custom NavBar Title, so you have to create a whole NavBar if you really need this functionality.
I hope this helps. :)

Categories