nilshartmann

Libraries and Tools for React

If you're developing an application based on React it can be helpful if you don't need to develop all the basic UI components yourself. Here you can find a list with various components, component libraries and complete design systems developed with and for React.

As the list got longer and longer I thought it would be better to have a "real" site for it.

👉 Please find the (new) list here: https://react-libs.nilshartmann.net/

virolea

upload(files) {
  const config = {
    onUploadProgress: function(progressEvent) {
      var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
      console.log(percentCompleted)
    }
  }

  let data = new FormData()
  data.append('file', files[0])

mofesolapaul

[
    {
        "state": "Abia",
        "lgas": [
            "Aba North",
            "Aba South",
            "Arochukwu",
            "Bende",
            "Ikawuno",
            "Ikwuano",

paulirish

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

segebee

[{"state":{"name":"Abia State","id":1,"locals":[{"name":"Aba South","id":1},{"name":"Arochukwu","id":2},{"name":"Bende","id":3},{"name":"Ikwuano","id":4},{"name":"Isiala Ngwa North","id":5},{"name":"Isiala Ngwa South","id":6},{"name":"Isuikwuato","id":7},{"name":"Obi Ngwa","id":8},{"name":"Ohafia","id":9},{"name":"Osisioma","id":10},{"name":"Ugwunagbo","id":11},{"name":"Ukwa East","id":12},{"name":"Ukwa West","id":13},{"name":"Umuahia North","id":14},{"name":"Umuahia South","id":15},{"name":"Umu Nneochi","id":16}]}},{"state":{"name":"Adamawa State","id":2,"locals":[{"name":"Fufure","id":1},{"name":"Ganye","id":2},{"name":"Gayuk","id":3},{"name":"Gombi","id":4},{"name":"Grie","id":5},{"name":"Hong","id":6},{"name":"Jada","id":7},{"name":"Lamurde","id":8},{"name":"Madagali","id":9},{"name":"Maiha","id":10},{"name":"Mayo Belwa","id":11},{"name":"Michika","id":12},{"name":"Mubi North","id":13},{"name":"Mubi South","id":14},{"name":"Numan","id":15},{"name":"Shelleng","id":16},{"name":"Song","id":17},{"name":"Toung

fermion

Element.addMethods({
  viewable: function(el) {
    // INIT
    el = $(el);
    var scroll = document.viewport.getScrollOffsets();
    var viewport = document.viewport.getDimensions();
    var offsets = el.cumulativeOffset();
    var dimensions = el.getDimensions();
    
    // Sanity check