pushy-react
v0.1.0-beta.1
Published
A React friendly version of the fabulous pushy library by Christopher Yee
Downloads
9
Readme
Pushy React
A React friendly version of the fabulous pushy library by Christopher Yee
Usage
import {
Pushy,
SubMenu,
PushyMenuButton,
MenuItem,
PushyMenuProvider
} from "pushy-react";
function App() {
return (
<PushyMenuProvider>
<div className="App">
<header className="App-header">
<PushyMenuButton />
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
</p>
</header>
<Pushy>
<div>
<h1>Title</h1>
</div>
<MenuItem>
<a href="http://google.com">Google</a>
</MenuItem>
<SubMenu title="Progressive" open={false}>
<MenuItem>
<a href="#">Tool</a>
</MenuItem>
<MenuItem>
<a href="#">Rush</a>
</MenuItem>
<MenuItem>
<a href="#">Yes</a>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</MenuItem>
</SubMenu>
<SubMenu title="Metal">
<MenuItem>
<a href="#">Black Sabbath</a>
</MenuItem>
<MenuItem>
<a href="#">Metallica</a>
</MenuItem>
<SubMenu title="Thrash">
<MenuItem>
<a href="#">Anthrax</a>
</MenuItem>
<MenuItem>
<a href="#">Slayer</a>
</MenuItem>
</SubMenu>
</SubMenu>
<MenuItem>
<a href="#">Hello World</a>
</MenuItem>
</Pushy>
</div>
</PushyMenuProvider>
);
}
export default App;
Theming
Pushy and PushyMenuButton both take a theme prop which is an object of style overrides.
const theme = {
pushy: {
background: "purple",
a: {
color: "chucknorris",
hover: {
color: "#987898"
}
},
menuButton: {
color: "blue",
background: "green"
}
}
};
<PushyMenuButton theme={theme}/>
<Pushy theme={theme}>