npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@utin-francis-peter/react-component

v1.1.0

Published

As I interacted with more node packages, I got curious about how these components are built and published for other devs in the ecosystem to leverage on and save their time. This (cat kind of) curiosity led me into building this library.

Downloads

4

Readme

React Component Library

As I interacted with more node packages, I got curious about how these components are built and published for other devs in the ecosystem to leverage on and save their time. This (cat kind of) curiosity led me into building this library.

At the moment, the official documentation isn't ready and does not have support for TypeScript yet. All these would be addressed in the next release. In addition, this package would focus on going more crazy about a particular UI component I'm yet to decide on (we can collaborate).

Through this brief README, you'll learn about the existing components and its expected props.

Installation

react and react-dom are peerDependencies. Have these packages installed first before proceeding with installation of the react component package.

Also, the project depends on tailwindCSS for aesthetics.

npm npm i @utin-francis-peter/react-component

yarn yarn add @utin-francis-peter/react-component

Components

Accordion

The accordion component expects an accordionList prop. Each list item is expected to have the following keys:

  • id
  • question
  • answer And other keys you may wish to use.

Button

The button component expects a number of props. They include:

  • className: for accepting tailwind style classes
  • children
  • type: set to a default value of "button"
  • variant: set to a default value of "primary"
  • size: set to a default value of "sm"
  • onClick: expects a callback function used in response to user actions
  • isDisabled: expects a condition for disabling the button

FileUploader

The FileUploader component currently supports single file upload. Multiple file uploads would be effected in the next release. The component allows for Click-to-Select and Drag-and-Drop method of selecting files.

The following props are available to the component:

  • btnLabel
  • accept: string[] that specifies the accepted files/formats
  • maxFileSize
  • canDragAndDrop: toggles the drag-and-drop feature
  • canUseIcon
  • iconColor
  • iconSize
  • handleUpload: callback that handle upload of the file to a server

Link

A simple link component for creating links. Available props include:

  • children
  • href
  • icon
  • isPairedWithIcon: when true, an icon can be attached to the link.

Pagination

The Pagination component, mostly used to control the number of items that gets rendered at a time expects the following props:

  • data: an array of data you wish to render controllably
  • itemsPerPage: specifies the number items to render per page
  • setItemsPerPage: a callback for updating number of items per page

StarRating

The simple StarRating component doesn't require any props. More configuration would be put in place soon.

Tab

The modern Tabbed UI component allows contents or components to be conditionally rendered on a page based on the active tab link. The component expects the following props:

  • tabNavList
  • tabContentData: for now, a list of contents to be displayed based on id of active tab - I.e the id of active tab matches the id of contentData obj. In later release, this option would be more flexible and configurable.
  • variant: "contained" || ""

TextInput

A simple TextInput component that allows toggling between regular input field or a password field. The component accepts the following props: id,

  • inputType
  • labelText
  • helperText
  • size
  • placeholder
  • showHelperText
  • showLabelText
  • isDisabled
  • isReadOnly
  • isPasswordMode
  • showPassword
  • togglePasswordVisibility
  • inputValue
  • onChange
  • onClick

ToggleSwitch

The ToggleSwitch component is used to toggle between a boolean state. The component expects the following props:

  • variant: "skeleton" || ""
  • showLabel
  • size
  • onClickHandler The component also has an internal isToggled state that toggles whenever the ToggleSwitch is clicked.

Tooltip

The Tooltip component is used to give brief insights about an item when hovered.

More updates coming soon.

For now, the component accepts the following props:

  • children
  • content