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([]);
  
  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: {selectedCoin}
      </h1>
      <div className="dropdown">
        <button 
          onClick={() => {
            setDropDownOpen(!dropDownOpen)
          }} 
          className="dropdown-button"
        >
          Select a coin
        </button>

        {dropDownOpen &&
          <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>
    </>
  )
}


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

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;
}

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

.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;
}