Yefee-ui is a react mini-library, right now yefee-ui have just 6 components, but it's lightweight, type safe & easy to use!
You can customize whatever you want with className or style props.
import Button from "yefee-ui/src/lib/Button/Button";
.
.
.
<Button type="outlined" color="secondary>
Example!
</Button>
- normal (default)
- rounded
- outlined
- rounded-outlined
- primary (default)
- success
- danger
- secondary
- white
import Alert from "yefee-ui/src/lib/Alert/Alert";
.
.
.
<Alert color="secondary>
Example!
</Alert>
- primary (default)
- success
- danger
- secondary
- white
import Dialog from "yefee-ui/src/lib/Dialog/Dialog";
.
.
.
const [show, setShow] = useState(false);
return(
<>
<Button type="outlined" color="white"
onClick={()=>setShow(true)}>
Open the Dialog!
</Button>
<Dialog color="white">
Example!
<Button type="outlined" color="danger" onClick={()=>setShow(false)}>
Close it
</Button>
</Dialog>
</>
)
- dark (default)
- white
import DropdownBase from "yefee-ui/src/lib/Dropdown/Dropdown";
import Dropdown from "yefee-ui/src/lib/Dropdown/Dropdown";
import Button from "yefee-ui/src/lib/Button/Button";
.
.
.
const [show, setShow] = useState(false);
const items = [
{
name: "Hi!"
change: "English"
},
{
name: "Bonjour!"
change: "French"
},
{
name: "Selam!"
change: "Turkish"
},
{
name: "Hola!"
change: "Spanish"
},
]
const [valueOfDropdown, setValueOfDropdown] = useState("Please pick an language");
return(
<>
<DropdownBase
style={{
width: "320px",
height: "160px",
borderRadius: "32px",
padding: "16px",
fontSize:"16px"
}}
{/* style & classname are optional */}
>
<Button onClick={()=>setShow(!show)}>
{valueOfDropdown}
</Button>
<Dropdown closer={()=>setShow(false)} setter={(change: any)=>setValueOfDropdown(change)}
items={items} show={show} color="white" />
</DropdownBase>
</>
)
// the change in the object is change of the state when clicked to the dropdown item.
- dark (default)
- white
It have same props with input.
import Input from "yefee-ui/src/lib/Input/Input";
.
.
.
<Input placeholder="hey, type something!" />
import TooltipBase from "yefee-ui/src/lib/Tooltip/Tooltip";
import Tooltip from "yefee-ui/src/lib/Tooltip/Tooltip";
import Button from "yefee-ui/src/lib/Button/Button";
.
.
.
const [show, setShow] = useState(false);
const [valueOfDropdown, setValueOfDropdown] = useState("Please pick an language");
return(
<>
<TooltipBase
style={{
width: "320px",
height: "160px",
borderRadius: "32px",
padding: "16px",
fontSize:"16px"
}}
{/* style & classname are optional */}
>
<Button onClick={()=>{setShow(true)} >
Open Tooltip!
</Button>
<Tooltip position="left" show={show} color="white" />
</TooltipBase>
</>
)
- bottom (default)
- left
- right
- top
- dark (default)
- white