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

desmy-react

v1.4.0

Published

Introducing an easy-to-use, lightning-fast React.js component that streamlines your development process. Our solution prioritizes simplicity, speed, and optimization, making it a breeze to build projects in React.

Downloads

401

Readme

Desmy-react

Introducing an easy-to-use, lightning-fast React.js component that streamlines your development process. Our solution prioritizes simplicity, speed, and optimization, making it a breeze to build projects in React.

Currently working on other components, contact [email protected] for assistance

  • Zero-dependency (pre-built bundle)

Features

  • DesmyModalHandler
  • DesmyModalWrapper
  • DesmyDropDown
  • DesmyAlertDialog
  • DesmyButton (Types : NORMAL, SMALL, LARGE. Request state and icon supported)
  • DesmyClickOutsideListener
  • DesmyModalContainer
  • DesmyTextInput (Support email address, phone number, number validations)
  • DesmyFilePicker
  • DesmyAccordion
  • DesmyDataTable
  • DesmyCustomDataTable (Cards and custom views support)
  • DesmyDataSetTable (Expandable and Collapsable)
  • DesmyPopupMenu
  • DesmyListCard (Card views)

Utilities

  • DesmyAuth
  • DesmyState
  • DesmyAlert
  • DesmyCommons
  • DesmyLazyLoading
  • DesmyRxServices
  • DesmyReadMoreOrLess

Installation

# Yarn
$ yarn add desmy-react

# NPM
$ npm i --save desmy-react

Using desmy-react library

The library utilizes dynamically created CSS by including 'desmy-react/dist/style.css' in your main.jsx or App.jsx file.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'// Import your own components
import 'desmy-react/dist/style.css'; // Import the library CSS file
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

DesmyModalHandler usage

To enable the modal functionality, include the following code snippet in your index.html body tag

<!-- This div will act as the container for your modal -->
    <div id="modal-root"></div>
  import { DesmyModalHandler } from 'desmy-react';

  class App extends React.Component {

      constructor(props) {
          super(props);
          this.state = {
              modal: null // Initialize modal state
          }
      }
      handleSubmit=(e)=>{
          e.preventDefault()
          try{
            var settings={
                btnPosition:`Continue`,
                btnNegative:`Cancel`
            }
            const handleClose = (state) => {
                this.setState({modal:null,}) // Close modal by setting modal state to null
            }
            const modal = <DesmyModalHandler settings={settings} onClose={handleClose}>
                <div className='flex flex-col text-sm w-full py-2'>Testing dialog Desmy react?</div>
            </DesmyModalHandler>;
            
            this.setState({ modal }); // Set modal to be rendered
        }catch(e){
           // Handle errors
        }
      }

      render(){
        return (
          <>
              {this.state.modal}  {/* Render the modal here */}
              <form method="POST" onSubmit={this.handleSubmit}>
                  <button>Click to confirm</button>
              </form>
          </>
        )
      }
  }

Make sure to add the line {this.state.modal} to your component's render method to display the modal.

DesmyDropdown usage


  import React from 'react';
  import { DesmyDropdown } from 'desmy-react';

  class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      genderlist:[{id:"FEMALE",name:"Female"},{id:"MALE",name:"Male"}],
      input:{
        gender:""
      }
    }

  }
  render(){
    return (
    <>
      <form method="POST" onSubmit={this.handleSubmit}>
          <div className="relative w-full group">
              # Local
              <DesmyDropdown 
                  data={this.state.genderlist} 
                  defaultValue={this.state.input.gender}
                  handleChange={(data)=>{
                      var {input} = this.state
                      input['gender'] = data.id
                      this.setState({input})
                  }} 
                  dropdownClass={`bg-black text-black border`}
                  placeholder={`Placeholer`} 
                  dropdownListClass={`flex w-full bg-white dark:bg-slate-900 text-black dark:text-white hover:bg-gray-200`} 
                  className={`flex w-full dark:text-white text-sm border-0 border-black dark:border-gray-300 bg-transparent outline-none focus:outline-none`}
              />

              # Server Request
              <DesmyDropdown 
                  request={{
                      url:"endpoint_url_here"//https://example.com/1/
                  }}
                  defaultValue={this.state.input.gender}
                  handleChange={(data)=>{
                      var {input} = this.state
                      input['gender'] = data.id
                      this.setState({input})
                  }} 
                  dropdownClass={`bg-black text-black border`}
                  placeholder={`Placeholer`} 
                  dropdownListClass={`flex w-full bg-white dark:bg-slate-900 text-black dark:text-white hover:bg-gray-200`} 
                  className={`flex w-full dark:text-white text-sm border-0 border-black dark:border-gray-300 bg-transparent outline-none focus:outline-none`}
              />
                                                  
          </div>
      </form>
    </>
    )
  }
  export default App
  }

DesmyModalContainer usage

  import { DesmyModalContainer } from 'desmy-react';

  class App extends React.Component {

      constructor(props) {
          super(props);
      }
      handleOnClose=()=>{

      }
      render(){
        return (
          <>
              <DesmyModalContainer data={{title:"Create User"}} onClose={()=>this.handleOnClose()}>
                <form method="POST">
                    <input type="text" placeholder="username"/>
                    <input type="submit" value="create"/>
                </form>
              </DesmyModalContainer>
          </>
        )
      }
  }

DesmyAuth usage

A simple authentication utility for managing sessions and data storage.

import {DesmyAuth} from 'desmy-react';
// Example usage
DesmyAuth.save('username', 'kekeli');// Save data
DesmyAuth.get('username'); // Output: kekeli
DesmyAuth.remove('username');// Remove data
DesmyAuth.clear();// Clear all data
DesmyAuth.logout();// Logout user
const cookieValue = DesmyAuth.getCookie('session');// Get cookie value

// Save list of data
const dataList = [
  { key: 'username', value: 'kekeli' },
  { key: 'email', value: '[email protected]' }
];

auth.saveList(dataList, (success) => {
  console.log('Data saved successfully:', success);
});

DesmyCommons usage

A utility library for common JavaScript tasks.

import {DesmyCommons} from 'desmy-react';

// Example usage
const fileSize = DesmyCommons.getFileSize(myFile);
const extension = DesmyCommons.getExtension('desmydev.txt');
const fileName = DesmyCommons.getFileName('desmydev.txt');
const isValidUrl = DesmyCommons.isValidHttpUrl('https://desmydev.com');
const uniqueId = DesmyCommons.makeUniqueid();
const textFromName = DesmyCommons.nameToText('desmydev');
const randomColor = DesmyCommons.getRandomColor();
const key = DesmyCommons.generateKey();
const concatenated = DesmyCommons.concat('desmy', 'dev');
const isEmptyOrNull = DesmyCommons.isEmptyOrNull(null);
const toStringDefault = DesmyCommons.toStringDefault(123, 'default');
const toStringData = DesmyCommons.toString(123);
const isEmpty = DesmyCommons.isEmpty('');
const passwordsValid = DesmyCommons.validatePasswords('pass1', 'pass1');
const passwordValidation = DesmyCommons.validatePassword('Password1!');
const isNotEmpty = DesmyCommons.isNotEmpty('desmy');
const underscoreToSpace = DesmyCommons.convertUnderscoreToSpaceString('desmy_dev');
const imageDimensions = await DesmyCommons.imageSize(imageBlob);
const capitalized = DesmyCommons.capitalizeEachWord('desmy dev');
const formattedDate = DesmyCommons.formatDateString('2024-05-14');
const emailValid = DesmyCommons.validateEmail('[email protected]');
const convertedNumber = DesmyCommons.convertNumber(123);
const daysRemaining = DesmyCommons.daysLeft('2024-12-31');
const customFormattedDate = DesmyCommons.formatDateToCustomFormat(new Date());
const timeAgo = DesmyCommons.getTimeAgoAndCustomDate(new Date());
const roundedData = DesmyCommons.roundTo2dp('3.14159');