sharlq-comp-lib

2.7.9 • Public • Published

Creating my own component library

for learning purposes and to develope it and use it in the futuer i have published my own library

if you have any suggestions or modifications to any components or advice i am open to pull requests and suggestions

components

Select

its hard to syle the HTML select so i ahve created select component that can be styled easily
Select
it take two props

  1. items : an array that has the items of the list
  2. onItem : a function that git triggered when you press the item this function have its list item as an argument

usage

import {Select} from 'sharlq-comp-lib'
 <Select
  title={"Select From"},
    items={["firstItem","secondItem","thirdItem"]},
    onItem = {handleItemFunction},
    width = {"175px"}}/>

Button

a simple customizable button

usage

import {Button} from 'sharlq-comp-lib'
 <Button
  label={"press here"},
   {...props}/>

Card

i have added a simple card
there is also CardImg compnent to provide container to add image to the card
and also the CardBody component that provides a container to add text to the card

note here both the CardImg and CardBody are optional

Card

usage

import {Card,CardImg,CardBody} from 'sharlq-comp-lib'
 <Card>
 <CardImg src={"url"} alt={"message"}/>
 <CardBody>
 {children}
 </CardBody>
 {children}
 </Card>

Animated Card

i have created animated card that hovers relative to the position of your cursor over it
Animated Card

usage

you can add the classes using yourClass prop

import {CardAnimated} from 'sharlq-comp-lib'
 <CardAnimated yourClass={"classnamr"}>
 {children}
 </CardAnimated>

Package Sidebar

Install

npm i sharlq-comp-lib

Weekly Downloads

0

Version

2.7.9

License

MIT

Unpacked Size

217 kB

Total Files

37

Last publish

Collaborators

  • sharlq