MWjBvjv

index.html

<div id="root"></div>

mwjbvjv.markdown

MWjBvjv

A Pen by George Norris on CodePen.

License.

script.babel

const tokensUrl = "https://raw.githubusercontent.com/Uniswap/token-lists/master/test/schema/bigexample.tokenlist.json";

function iconURL(address) {
  return `https://github.com/trustwallet/assets/blob/master/blockchains/ethereum/assets/${address}/logo.png?raw=true`
}

function Dropdown() {
  const [dropDownOpen, setDropDownOpen] = React.useState(false);
  const [selectedCoin, setSelectedCoin] = React.useState(null);
  const [coins, setCoins] = React.useState([]);
  
  
  const ref = React.useRef()
  useOnClickOutside(ref, () => setDropDownOpen(false))
  
  
  React.useEffect(() => {
    fetch(tokensUrl)
      .then(data => {
        return data;
      })
      .then(data => {
        return data.json()
      })
      .then(data => {
        setCoins(data.tokens)
      })
  }, [])
  
  
  return (
    <>
      <h1>
        You're selected coin is: <span className="selected-coin">{selectedCoin}</span>
      </h1>
      <div className="dropdown" ref={ref}>
        <button 
          onClick={() => {
            setDropDownOpen(!dropDownOpen)
          }} 
          className="dropdown-button"
        >
          Select a coin
        </button>

        {dropDownOpen &&
          <div className="dropdown-list-wrapper">
            <div className="dropdown-list">
              {coins.map(token => {
                return (
                  <div 
                    className="dropdown-item"
                    onClick={() => {
                      setSelectedCoin(token.symbol)
                    }}
                  >
                    <img className="dropdown-logo" src={iconURL(token.address)} />
                    {token.symbol}
                  </div>
                )
              })}
            </div>
          </div>
        }

      </div>
    </>
  )
}


ReactDOM.render(<Dropdown />, document.getElementById("root"));





function useOnClickOutside(ref, handler) {
  React.useEffect(() => {
    const listener = (event) => {
      if (!ref.current || ref.current.contains(event.target)) {
        return
      }

      handler(event)
    }

    document.addEventListener('mousedown', listener)
    document.addEventListener('touchstart', listener)

    return () => {
      document.removeEventListener('mousedown', listener)
      document.removeEventListener('touchstart', listener)
    }
  }, [ref, handler])
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

style.css

body {
  display: flex;
  justify-content: center;
  padding: 10px;
}

.dropdown {
  width: 500px;
  position: relative;
}

.selected-coin {
  color: rgb(255, 0, 122);
}

.dropdown-list-wrapper {
  position: absolute;
  width: 100%;
  top: 100%;
  transform: translateY(2px);
  overflow: hidden;
  border: 1px solid gray;
  border-radius: 10px;
} 

.dropdown-list {
  max-height: 300px;
  overflow-y: auto;
}

.dropdown-item {
  padding: 6px 10px;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.dropdown-item:hover {
  background: #eee;
}

.dropdown-logo {
  width: 1.5rem;
  margin-right: 5px;
}

.dropdown-button {
  background: black;
  color: white;
  border: 0;
  width: 100%;
  margin: 0;
  padding: 13px;
  cursor: pointer;
  border-radius: 10px;
  font-size: 1.2rem;
  outline: none;
}


.dropdown-button:hover {
  background: #313131;
  transition: all;
}