How does Codesandbox implement resizable windows. I want to implement a user resizable grid in React just like VS-Code or CodeSandbox allows to.
Can someone point me in the right direction?
Edit: I found a solution for this, it was to use the react-simple-resizer npm module
Check out its docs they'll be able to help you.
Here's the example that they have:
import React from 'react';
import { Container, Section, Bar } from 'react-simple-resizer';
export default () => (
<Container style={{ height: '500px' }}>
<Section style={{ background: '#d3d3d3' }} minSize={100}/>
<Bar size={10} style={{ background: '#888888', cursor: 'col-resize' }} />
<Section style={{ background: '#d3d3d3' }} minSize={100} />
</Container>
);
Related
I am implementing the exact same code shown in the material-ui library documentation here
https://mui.com/x/react-data-grid/layout/#flex-layout
I am trying to implement the flex layout,
I just did the exact same steps and the console shows the error all the time:
Sandbox:
https://stackblitz.com/edit/react-8ahs3n?file=src/App.js
Please help, appreciated.
In the documentation example you linked to there is one additional div wrapping what you have in your code: <div style={{ height: 400, width: '100%' }}>. Including that wrapper element (which gives the element an intrinsic height as mentioned in the console warning) gets rid of the console error. Here's a modified version of your stackblitz that does not have the error: https://stackblitz.com/edit/react-m2uoq1?file=src%2FApp.js.
The 400px height in the documentation example can be replaced by whatever height you want -- it just can't be percent-based. If you want the DataGrid to be the full height of the browser, you can use 100vh instead of 100%.
Here's an example:
import * as React from "react";
import { DataGrid } from "#mui/x-data-grid";
import { useDemoData } from "#mui/x-data-grid-generator";
import CssBaseline from "#mui/material/CssBaseline";
export default function FlexLayoutGrid() {
const { data } = useDemoData({
dataSet: "Commodity",
rowLength: 50,
maxColumns: 6
});
return (
<>
<CssBaseline />
<div style={{ height: "100vh", width: "100%" }}>
<div style={{ display: "flex", height: "100%" }}>
<div style={{ flexGrow: 1 }}>
<DataGrid {...data} />
</div>
</div>
</div>
</>
);
}
In my example I included the CssBaseline component in order to get rid of the default 8px margin on the <body> element -- otherwise using 100vh will cause a scroll bar to appear; however the default margin (or a custom margin in your app) can be accounted for in other ways by using calc (e.g. height: "calc(100vh - 16px)").
Use a wrapper component such as Box from Material UI with flex display and height:
<div style={{ height: 400, width: '100%' }}>
<Box style={{
display: "flex",
height:400,
justifyContent: "center",
alignItems: "center"
}}
>
<Datagrid/>
</Box>
</div>
Using react-particles-js
as a background on a React project, I discover that disables the anchor tag, don't know if its my implementation
const App = () => {
return (
<div className="App" style={{ position: "relative", overflow: "hidden" }}>
<div style={{ position: "absolute" }}>
<Particles height="330vh" width="100vw" params={particlesConfig} />
</div>
<Home /> {/*this is the content */}
</div>
);
};
What it happens its that in this component with link like this
<a
href="https://tienda-de-garage.herokuapp.com/"
style={{ textDecoration: "none", color: "black" }}
>
<p>Tienda de Garage</p>
</a>
Don't work.
I wonder if its the implementation, maybe the use of the view port the increase the size of the area to encompass the background but i'm not sure.
here its a live version, with the 1 link not working to show the issue
You need to set interactivity.detectsOn to window (InteractivityDetect.window or "window")
You can see a working sample here
This sample uses react-tsparticles but it's the same as react-particles-js since they share the same core library tsparticles
Apparently I'm having such a hard time styling material-ui components, maybe it's my poor knowledge of the framework, nevertheless let's judge that when I'm done explaining the situation.
I have a landing page that displays a video as the background and what I want is to add other components to the center of that video screen like typographies.
here's my component:
import React, {Fragment, useState} from 'react'
import {createStyles, Grid, makeStyles, Typography} from '#material-ui/core'
import DrawerC from '../components/drawer'
import AppbarC from '../components/appbar'
import background from '../assets/background.mp4'
const useBackgroundStyle = makeStyles((theme)=>createStyles({
root:{
width: '100%',
height: '100%',
overflowX: 'hidden'
},
typographyMiddle:{
∎∎∎∎∎∎ SOME STYLING TO POSITION THE TYPOGRAPHY IN THE MIDDLE ∎∎∎∎∎∎
position: 'absolute',
∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
},
[theme.breakpoints.down('md')]:{
root:{
width: window.screen.width,
height: window.screen.height,
objectFit: 'cover',
objectPosition: '20% 0%',
overflowX: 'hidden'
}
}
}))
export default function () {
const backgroundStyle = useBackgroundStyle()
const [drawerState, handleDrawerState] = useState(false)
const [datepickerState, handleDatepicker] = useState(false)
return(
<Fragment>
<AppbarC handleDrawerState={handleDrawerState} handleDatepicker={handleDatepicker} />
∎∎∎∎∎∎ THIS IS THE PART OF THE CODE THAT MATTERS ∎∎∎∎∎∎
<video autoPlay='autoplay' muted loop id="myVideo" className={backgroundStyle.root}>
<source src={background} type="video/mp4" />
</video>
<Grid
container
spacing={0}
direction="column"
alignItems="center"
justify="center"
style={{ minHeight: '100vh' }}
className={backgroundStyle.typographyMiddle}
>
<Typography className={backgroundStyle.typographyMiddle}> THIS IS A TEST </Typography>
</Grid>
∎∎∎∎∎∎ ------------------------------------- ∎∎∎∎∎∎
<DrawerC state={drawerState} handleDrawerState={handleDrawerState} />
</Fragment>
)
}
I tried this method which I saw in another stackoverflow question asked by someone else but all it did was to center the typography but it added extra white space to the page.
So the main questions I would like to know the answers to really are:
what is the best way to centralize an element which is not a part of the framework?
what is the best way to centralize a component that IS a part of the framework?
what is the best way to style an element/component and test it when using the framework?
how does the framework's styling work?
You should be able to use "position:relative" on the parent (wrapper) component and then use "position:absolute" on the child component and using % + vh you can place the child component anywhere within the parent component.
I am trying to place a select menu in a Popper. The issue I'm running into is that the nested select menu wants to mount the popup that comes out of it on the body as a neighbor and not a child of popper. This causes the clickaway event to fire. Here's the code to reproduce it:
import React, { useState } from "react";
import "./styles.css";
import Popper from "#material-ui/core/Popper";
import TextField from "#material-ui/core/TextField";
import MenuItem from "#material-ui/core/MenuItem";
import ClickAwayListener from "#material-ui/core/ClickAwayListener";
export default function App() {
const [popperAnc, setPopperAnc] = useState(null);
const popperOpen = Boolean(popperAnc);
return (
<div className="App">
<div
onClick={e => {
setPopperAnc(e.currentTarget);
}}
>
Popper anchor
</div>
<div style={{ position: "absolute" }}>
<Popper open={popperOpen} anchorEl={popperAnc}>
<ClickAwayListener
onClickAway={e => {
setPopperAnc(null);
}}
>
<TextField select label="Menu">
<MenuItem value="select1">Select me!</MenuItem>
</TextField>
</ClickAwayListener>
</Popper>
</div>
</div>
);
}
https://codesandbox.io/s/strange-bassi-liwdc?file=/src/App.js:0-1013
If you need to use Select - just use it (don't use TextField, it doesn't make any sense).
You need to make sure that the second popper is not rendered as a portal (you need to set disabledPortal on the MenuProps of the Select element.
You need to tell the new menu where to position itself and what will be it's size.
<div style={{ position: "absolute" }}>
<Popper open={popperOpen} anchorEl={popperAnc}>
<ClickAwayListener
onClickAway={e => {
console.log("click away");
setPopperAnc(null);
}}
>
<div>
<div>Wow</div>
<Select
label="Menu"
MenuProps={{
disablePortal: true,
anchorEl: this,
style: { marginTop: "20px", width: "150px", height: "200px" }
}}
>
<MenuItem value="select1">Select me!</MenuItem>
</Select>
</div>
</ClickAwayListener>
</Popper>
</div>
Here is a working example: https://codesandbox.io/s/mui-nested-popper-4uu5l?file=/src/App.js
I have a CardHeader which has a dropdown within it, I use the to select various options for the table, however currently it looks awful and im not entirely sure how to style it in a more appropriate way, I am using material UI's framework to do this.
formControl: {
flexBasis: 'auto',
position: 'relative'
},
<CardHeader className={classes.cardHeader} classes={{ title: classes.cardHeader }}
avatar={
<Home />
}
action={
<FormControl className={classes.formControl}>
<InputLabel htmlFor="Available Contracts" style={{ marginRight: 20, color: 'white' }}>Contract Type</InputLabel>
<Select
value={contractType.contractObject}
onChange={handleChange}
inputProps={{
name: 'contractObject',
id: 'contractObject',
}}
>
<MenuItem value={10}>Local Contract</MenuItem>
<MenuItem value={20}>Framework Contract</MenuItem>
</Select>
</FormControl>
}
/>
A screen shot below of the table
As you can see the Contract Type is currently on the right, I would like this on the left next to the Home icon if possible, any ideas?
The 'Card' component has further sub components - 'CardHeader', 'CardContent'.
To style the CardHeader for instances, the API indicates that you can do the following:
import React from 'react';
import { makeStyles } from '#material-ui/styles';
import {
Card, CardContent, CardHeader, Divider
} from '#material-ui/core';
const useStyles = makeStyles(theme => ({
action: {
margin: 0
}
}))
const CustomerInfoCards = ({ customer }) => {
const classes = useStyles();
return (
<Card>
<CardHeader
action={
<p>{customer._id}</p>
}
classes={{ action: classes.action }}
className={classes.action}
subheader={customer.email}
title={customer.name}
/>
<Divider />
<CardContent>
<h2>Some text</h2>
</CardContent>
</Card>
)
}
export default CustomerInfoCards
Main thing here is classes={{ action: classes.action }} - which removes the default margin top and right of 8px for the action prop.
Take a look at the API link above to know the various CSS exposed by material-ui and have fun styling!
In your styling for formControl add a new property flex and have its value as flex: "0 1 auto",
formControl: {
flexBasis: 'auto',
position: 'relative',
flexgrow: '1',
flex: '0 1 auto',
}
Hope this helps. flex usually adjust the component to relative right of the earlier component.
Read more: CSS flex on W3Schools