Science
Periodic Table
The 18-column periodic table with separate lanthanide and actinide rows and a detail panel. Cells are colored by category.
It accepts any list of elements with the PeriodicElement shape. ELEMENTS from @indoku/science fits as-is (all 118 elements, computed period, group and category).
Import
tsx
import { PeriodicTable } from "@indoku/ui"import { ELEMENTS } from "@indoku/science"Examples
Basic usage
H
Hydrogen #1
1.008 u · nonmetal
tsx
function PeriodicTableBasic() { return <PeriodicTable elements={ELEMENTS} />}Controlled selection
Read the selected element and compute with it.
Fe
Iron #26
55.845 u · transition metal
tsx
function PeriodicTableSelect() { const [selected, setSelected] = useState(26) const el = ELEMENTS[selected - 1] return ( <div style={{ display: "grid", gap: 8 }}> <PeriodicTable elements={ELEMENTS} selected={selected} onSelect={(e) => setSelected(e.number)} /> <small> {el.name} ({el.symbol}) · Z = {el.number} · molar mass {molarMass(el.symbol).toFixed(3)} g/mol </small> </div> )}Props
PeriodicTable
| Prop | Type | Default | Description |
|---|---|---|---|
elements* | readonly PeriodicElement[] | – | |
onSelect | (element: PeriodicElement) => void | – | Called when a cell is clicked. |
selected | number | – | Controlled selected atomic number. |
* required. Style props and HTML attributes are accepted as well.
Accessibility
- Cells are buttons with the element name as label.
Created by @indokudev