react-pinwheel-navbar
v0.0.3
Published
pinwheel shaped react navigation
Downloads
6
Maintainers
Readme
react-pinwheel-navbar
PinwheelNavbar is pinwheel shaped navigation, JavaScript React component.
Note: PinwheelNavbar try to solve z-index paradox. https://stackoverflow.com/questions/22352649/css-z-index-paradox-flower But I just covering the problem part with trick, you can't put animation to elements. Though I hope you enjoy it.
Install
npm install react-pinwheel-navbar
Usage
import React from "react";
import PinwheelNavbar from "react-pinwheel-navbar";
const root = ReactDOM.createRoot(document.getElementById("root"));
const colors = ["#a83332", "#5f308c"];
const texts = ["#a83332", "#ce5c32", "#c88235"];
const links = [
"https://www.youtube.com/",
"https://www.youtube.com/",
"https://www.youtube.com/",
"https://www.youtube.com/",
"https://www.youtube.com/",
];
const onClicks = [
function () {
console.log("1");
},
function () {
console.log("2");
},
function () {
console.log("3");
},
function () {
console.log("4");
},
function () {
console.log("5");
},
function () {
console.log("6");
},
function () {
console.log("7");
},
function () {
console.log("8");
},
function () {
console.log("9");
},
function () {
console.log("10");
},
];
root.render(
<React.StrictMode>
<PinwheelNavbar
colors={colors}
texts={texts}
number={9}
width={80}
height={120}
border={"1px solid black"}
borderRadius={"5px"}
textColor={"black"}
fontWeight={"regular"}
onClicks={onClicks}
links={links}
></PinwheelNavbar>
</React.StrictMode>
);
Props
number: PropTypes__default["default"].number.isRequired,
colors: PropTypes__default["default"].array.isRequired,
texts: PropTypes__default["default"].array.isRequired,
links: PropTypes__default["default"].array,
onClicks: PropTypes__default["default"].array,
width: PropTypes__default["default"].number.isRequired,
height: PropTypes__default["default"].number.isRequired,
border: PropTypes__default["default"].string,
borderRadius: PropTypes__default["default"].string,
textColor: PropTypes__default["default"].string,
fontWeight: PropTypes__default["default"].string,
fontFamily: PropTypes__default["default"].string,
boxShadow: PropTypes__default["default"].string
number(Required) Number of card.
colors(Required) Array of background-color of each card. If length of colors less than number, stretching array with gradient-color library.
texts(Required) Array of text of each card. If length of texts shorter than number, spare cards will empty.
links Array of links of each card. If length of links shorter than number, spare cards will empty.
onClicks Array of onclick function of each card. If length of onClicks shorter than number, spare cards will empty.
width(Required) Number of width, calculated in pixels.
height(Required) Number of height, calculated in pixels.
border
border style string of card. Just type like other css.
Default is "none"
.
borderRadius
border-radius style string of card. Just type like other css.
Default is "5px"
.
textColor
color style string of card. Just type like other css.
Default is "white"
.
fontWeight
font-weight style string of card. Just type like other css.
Default is "bold"
.
fontFamily font-family style string of card. Just type like other css. Default is up to your browser.
boxShadow
style string of card. Just type like other css.
Default is "none"
.
Dependencies
gradient-color