Sha256: 8d4976e57b51a61a0e2fe3b90dd42e6123e0bf63d0fd195502ebf1c482797986
Contents?: true
Size: 1.23 KB
Versions: 13
Compression:
Stored size: 1.23 KB
Contents
import * as React from 'react'
import { useState, useEffect } from 'react'
import type { FunctionComponent } from 'react'
import style from './HelloWorld.module.css'
import logo from './logo.svg'
export interface Props {
readonly name: string
}
// Note, you need to declare the `FunctionComponent` type so that it complies
// with `ReactOnRails.register` type.
const HelloWorld: FunctionComponent<Props> = (props: Props) => {
const [name, setName] = useState(props.name)
useEffect(() => {
console.log(
'%c%s%c%s',
'color: green; background-color: lightgreen; font-weight: bold;',
'ShakaCode is hiring!',
'color: green; background-color: lightgreen; font-weight: normal;',
'Check out our open positions: https://www.shakacode.com/career/',
);
}, [])
return (
<>
<img src={logo} className={style.logo} alt="logo" />
<h3>Hello, {name || 'World'}!</h3>
<hr />
<form>
<label className={style.bright} htmlFor="name">
Say hello to:{' '}
<input
id="name"
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
</label>
</form>
</>
)
}
export default HelloWorld
Version data entries
13 entries across 13 versions & 1 rubygems