score:1
you can do that with pure css
and just replace the class when you need to.
.cls {
max-width: 400px;
overflow-x: hidden;
}
and when you don't need this class anymore (on button click) you just remove it.
// you store the class name in the state
const [classes, setclasses] = usestate('cls')
//
const handleshowmore = () => {
setclasses('') // or anything else
}
...
return <div>
<div classname={classes}>your li go here</div>
<button onclick={handleshowmore}>show more</button>
</div>
update you can get the hidden ones by accessing the ref that you already have.
[...navref.current.children].foreach((item, index) => {
item.offsetwidth // will get you the li width
})
now you can either get the indexes of the items, or move them to the node that you want to display them in (div in the modal) with appendchild.
score:-1
you could get each li width before putting them in the dom, sum them and when threshold is met you hide rest of the elements until user clicks more link
the simplest approach
const links = [
{
text: "technology",
url: "placeholder.html"
},
{
text: "beauty",
url: "placeholder.html"
},
{
text: "construction",
url: "placeholder.html"
},
{
text: "manufactoring",
url: "placeholder.html"
},
{
text: "transportation",
url: "placeholder.html"
},
{
text: "real estate",
url: "placeholder.html"
},
];
const { useref, usestate, useeffect } = react;
const app = () => {
const [clickedmore, setclickmore] = usestate(false);
const onclick = () => setclickmore(true);
const renderlistitems = function*() {
const widththreshold = 200;
let totalwidth = 0;
let index = 0;
for(const link of links) {
const test = document.createelement("li");
test.textcontent = link.text;
test.style.visibility = 'hidden';
test.style.position = 'absolute';
document.body.appendchild(test);
const offsetwidth = test.offsetwidth;
test.parentnode.removechild(test);
const style = {
display: "list-item",
}
if(!clickedmore && totalwidth + offsetwidth > widththreshold) {
style.display = "none";
}
totalwidth += offsetwidth;
yield (<li style={style} key={index}>{link.text}</li>);
index++;
}
}
return <div><ul classname="nav">
{[...renderlistitems()]}
</ul>
{clickedmore ? null : <div>
<button onclick={onclick}>more link</button>
</div>}
</div>;
}
reactdom.render(
<app />,
document.getelementbyid('root')
);
* {
padding: 0;
margin: 0;
list-style: none;
}
.cls {
max-width: 400px;
}
.nav {
display: flex;
width: 100%;
position: relative;
padding-right: calc(44px - 0.9em);
}
.nav > li {
flex-grow: 1;
}
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.12.1/polyfill.min.js"></script>
<div id="root"></div>
Source: stackoverflow.com
Related Query
- How to provide window width to all React components that need it inside my app?
- how to calculate all addToCart product total price in react redux
- how to calculate width of all li in react?
- how to calculate width of component in react js?
- How to get the width of a react element
- How can I reset a react component including all transitively reachable state?
- How to set image width to be 100% and height to be auto in react native?
- How to pass all other props to react class?
- How can I block a React component to be rendered until I fetched all informations?
- How to override the width of a TextField component with react MUI?
- React Native: How to set <TextInput/>'s height and width to <View/> container?
- how to make material data grid width to fill the parent component in react js
- React - How to detect when all sub-components of a parent component are visible to the user?
- How to set the width of a React component during test?
- How to make parent's width wrap its content in React Native?
- how to get list of all registered synthetic event handlers/listeners for a React Component?
- How to get width of element using React ref?
- How do I target DOM elements inside a react component, or should I avoid targeting DOM elements all together?
- How to redirect all request to index in react or angular using htaccess?
- How to pass percentage value to width to React data grid column
- How to Get: Component Width After Render in React
- How do I pass all state variables inside react hooks to my child component
- React Router: How to render element on all routes, except one?
- How to capture all clicks outside of a React Native component?
- How to traverse all React components including DOM components without TestUtils.findAllInRenderedTree?
- How to edit element width using react
- how to set react native button to full width
- How to display all options in react bootstrap typeahead menu with existing selection
- How to change height or width of pdf in react (npm react-pdf)
- How can I reuse the API data for all the pages in react js
More Query from same tag
- Getting this error when replying to comment: Can't perform a React state update on an unmounted component
- dev-server taking lot time to rebuild project in webpack 4
- XMLHttpRequest returning response in inspector but null when accessing it
- Retrieve firebase collection based on uid in React.js
- Can't get state in return area
- Redux with normlizr : unshift data to normlizr object
- 404 Not Found nginx React
- I keep getting a Typescript error after upgrading eact-chartjs-2 to a newer version. Can't figure out what the error means
- React Clear Form Fields After Submit
- Creating a Todo list in ReactJS, using mapping component struggling with mapping data.(Type annotations can only be used in TypeScript files)
- Mock axios twice with react-testing-library
- React State undefined after Set in componentDidMount
- Reset autohide timer in Snackbar when Re-Rendering
- Jest SpyOn in a Reactjs functional Component
- Can't Create A UUID For Every Element Returned?
- Erratic and slow behavior with create-react-app and Skaffold kubernetes
- Use spread props with additional props
- Better use some large or multiple small stores with React and Reflux
- How do I unsubscribe to the dispatch to grab new data onload on useEffect? - I'm using Redux Toolkit
- Tag Input with typing disabled only?
- NextJS: Axios or Fetch post and get method result wrong URL path api
- Ubuntu create-react-app fails with permission denied
- React Component Height
- react: React-router Link not loading a component
- Cannot read property 'key' of undefined storybook react
- how to set value in hooks
- React Typescript component not properly dispatching a redux action
- Javascript variables in class methods are not persisting
- how to initialize i18next
- Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead. ReactJS