Hi, I am currently a beginner to React.js, and I want to know if I could divide the a page's body with different background color without adding multiple components.
I have implemented the header and the footer, but I do not have any ideas to divide a body area into three parts. For example,
function App() {
return (
<div className="App">
<Navbar />
<AreaOne/>
<AreaTwo/>
<AreaThree/>
<Footer />
</div>
);
}
I was thinking about to use this kind of method, but I think it might be a better / more commonly used method. Any ideas would be appreciated
Related
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.
I'm trying to implement an application using highcharts/highstock and I'm facing a problem trying to use the full screen function.
I need to set a fixed hight to my charts and be able to view each chart from my page as a full screen one, but since the height is fixed it stays the same when full screen loads, I've tried the approach from this post but it's not working, if I set height to 100% the chart overflows the page and gets crooped depending on the aspect ratio of the screen.
I´ve also found this working demo, I can't replicate this one. I'm not sure how he's calling the component, also I don't know how the export module (hamburguer menu) is showing up if it's never called.
render() {
return <div className="chart" ref={ref => this.container = ref} />
}
on my application I'm calling the component this way
render() {
return (
<HighchartsReact
highcharts={Highcharts}
constructorType="stockChart"
options={options}
allowChartUpdate
callback={this.afterChartCreated}
/>
)
}
I tried passing an ID to this element to try to set height via CSS but it doesn't work.
I was trying to replicate my application with a working example, I could only do it on a codesandbox because of import structure, but for some reason full screen is not working there, it prompts this message
Full screen is not supported inside a frame.
This demo creates the chart without using Highcharts React wrapper - it's a combination of pure Highcharts JS and React - that's why export menu shows without called it. The Highcharts React wrappers work similarly, but more in 'React way' and gives other opportunities to manage the component.
Back to your issue - I think that a better approach will be defining the height of the Highcharts component as inline React styling. You can achieve by setting it in containerProps object.
<CardContent style={{ padding: 0 }}>
<HighchartsReact
highcharts={Highcharts}
containerProps={{ style: { height: "400px" } }}
options={options}
allowChartUpdate
/>
</CardContent>
Demo: https://codesandbox.io/s/fix-full-screen-253sq?file=/src/CustomGUIChart.js
To test it use the open in new window codesandbox option (button just above the exporting menu hamburger).
I have a screen with 10 charts (using recharts.org) -- when clicking on a chart I want to switch the route from http://localhost:3000/charts to http://localhost:3000/charts/first and simply have the first chart shown full screen, but without it being re-rendered since no data will change whatsoever.
Any advice on how I may achieve this?
The only way to do that (at least in my previous experiences) would be to have the chart on the same level as the Route (with some conditionals...), if you don't need it on top you can change the route place ... the thing is that it doesn't give much flexibility for grid/flex but it works :P (in my case I had the selected graph always on top so it was perfect fit, you may try some conditional styling based on the location but I am afraid it would rerender)
<Route path="/charts" >
{history.pathname === '/charts/first' && <Chart data ..../>}
{history.pathname === '/charts/second' && <Chart data ..../>}
<Route path="/charts/first" >
<h1> Up you have the unRendered graph </h1>
</Route>
</Route>
*
Chart is a wrapper of any rechart graph(bar, pie ...) and has the REACT MEMO IMPLEMENTED
*
I spent days with this issue if you need more help just comment here
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 :)
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