NameHash.jsx

NameHash.jsx

import React, { useState } from 'react'
import styled from '@emotion/styled'
import murmur3 from '../../utils/murmurhash3_32.js'

const Container = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  height: 75vh;
  font-size: 30px;

  & div {
    margin: 10px 0;
  }

  & input {
    width: 180px;
    margin: 0 10px;
    border-width: 0 0 1px 0;
    outline: none;
    font-size: 30px;
  }

`

function getNameHash(name) {
    if (!name) {
        return 0
    }
    return murmur3(name, 314) % 100
}

export default function NameHash(props) {

    const [name, setName] = useState('')

    function onNameChange(ev) {
        const value = ev.target.value
        setName(value)
    }

    return (
        <Container>
            <div>
                <span>Name:</span>
                <input autoFocus type="text" value={name} onChange={ev => onNameChange(ev)}/>
            </div>
            <div>
                <span>Name Hash: {getNameHash(name)}</span>
            </div>
        </Container>
    )
}