Comments (2)
Another idea may be using MediaQuery
library to wrap the grid area according to its query size (xs, sm, etc.).
It's also quite fair to expect from the end developer to check for the conditional area existence before rendering it. In the end, it is the end developer who decides on which screen sizes certain areas are visible.
{ Subtext && <Subtext /> }
Benefits
- Solves conditional rendering on different screen sizes
Downsides
- Introduces extra dependency
- Undefined
window
during SSR?
from atomic-layout.
Update
Conditional grid areas were implemented using react-responsive
.
Now, whenever conditional area is found, it is being wrapped in <MediaQuery />
with proper minWidth
or/and maxWidth
to match the requested resolution of the area.
from atomic-layout.
Related Issues (20)
- SSR: "useLayoutEffect does nothing on the server" HOT 2
- Support the "order" CSS property
- Responsive props suffixes ignore casing (templateLg = templatelg) HOT 3
- I can't attach a ref to Composition, because Composition does not use React.forwardRef HOT 1
- Rename "useResponsiveComponent" since it's not a hook HOT 2
- Warning: React does not recognize the `A` prop on a DOM element HOT 1
- Add "Area" component HOT 1
- Exported components must have "displayName"
- Rerendering of parent component causes Only to unmount and mount its children HOT 4
- Replace "MediaQuery" component with "useMediaQuery" hook
- Export a utility to compose inline @media queries HOT 2
- Input in a grid item loses focus due to extra parent rerendering HOT 3
- makeResponsive causes memory heap on hot reload
- Creating a 3 column layout. HOT 3
- useResponsiveValue might require to fire an effect for a dependency change HOT 4
- the except prop on the Only component get ignored with a custom breakpoint ref HOT 1
- useResponsiveValue won't use custom breakpoint names HOT 2
- Warning: React does not recognize the `sortingOrder` prop on a DOM element - `DataGrid`
- useResponsiveProps always returns empty object initialy client-side
- Are you considering supporting Vue or native JavaScript usage . HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from atomic-layout.