score:1

Accepted answer

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>


Related Query

More Query from same tag