Skip to content

Instantly share code, notes, and snippets.

@koenbok
Created May 15, 2019 18:49
Show Gist options
  • Save koenbok/dbfb5dbe1d60bac9420f0d114c82655d to your computer and use it in GitHub Desktop.
Save koenbok/dbfb5dbe1d60bac9420f0d114c82655d to your computer and use it in GitHub Desktop.
Tab Bar
import * as React from "react"
import { Frame, Stack } from "framer"
function capitalize(name) {
// Capitalizes a word: feed -> Feed
return name.charAt(0).toUpperCase() + name.slice(1)
}
function Button({ title, active, onTap }) {
const opacity = active ? 1 : 0.35
const style = { color: "#fff", fontSize: 18 }
return (
<Frame height={80} onTap={onTap} opacity={opacity} style={style}>
{capitalize(title)}
</Frame>
)
}
export function TabBar() {
// This remembers the active tab, defaults to home
const [active, setActive] = React.useState("home")
// This generates title, active and onTap props for a given name
function propsFor(title) {
return {
title,
active: active === title,
onTap: () => setActive(title),
}
}
// A simple stack with 4 different buttons
return (
<Stack gap={0}>
<Button {...propsFor("home")} />
<Button {...propsFor("feed")} />
<Button {...propsFor("profile")} />
<Button {...propsFor("settings")} />
</Stack>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment