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

react-insect

v1.1.6

Published

Highly customisable, minimalistic input x select field for React.

Downloads

96

Readme

Insect

⚡️ Features

  • Tiny size (~4kb Gzip)
  • 100% responsive.
  • Highly customisable.
  • Supports custom rem unit.
  • Zero third party dependency (asides react's recommended prop-types).
  • Typescript ready
  • Multi select options
  • Options search
  • Custom icons support

💾 Installation

$ yarn add react-insect

📄 Basic Usage

// Import Insect component
import { Insect } from 'react-insect';

// Use it in your code like so
export const MyComponent = () => {
  return (
    <>
      <Insect
        name="username"
        type="text"
        placeholder="Choose a username"
      />
    </>
  );
};

🪄 Props

Insect can be either an input field, a single select field or a multi select field. The props passed in determines what Insect is. Here's a table of all available props for input and for select.

🧩 General props

| Prop | Description | Type | default | --- | --- | --- | --- | | name | Sets the name of the input field. | string | | type | Sets type of input field | text \| textarea \| number \| password \| email \| select | text | label | Adds a label to the top of insect component. | string | | placeholder | Sets the placeholder for insect component. | string | Input or select an option | prefixIcon | Adds an icon at the left of insect field | string \| React.ReactNode \| null | | suffixIcon | Adds an icon at the right of insect field | string \| React.ReactNode \| null | | className | Custom classname for main insect container | string | | labelClass | Custom classname for insect label | string | | inputWrapperClass | Custom classname for the input field wrapper div | string | | inputClass | Custom classname for the main input field | string |
| iconsClass | Custom classname for all icons | string |
| onFocus | Function to trigger when input field is focused on. | (e: React.FocusEvent<HTMLInputElement>) => void | | onBlur | Function to trigger when input field goes out of focus. | (e: React.FocusEvent<HTMLInputElement>) => void |

🏁 For Input field type

| Prop | Description | Type | default | --- | --- | --- | --- | | value | Sets the value of the input field. | string | | rows | Sets the number of rows for textarea | number | | onChange | Sets the placeholder for insect component. | (e: React.FormEvent<HTMLInputElement>) => void |

🔮 For Select field type

| Prop | Description | Type | default | --- | --- | --- | --- | | allowMultiple | Enables multi select by setting the number of selectable items | number | | search | Toggles option search | boolean | (false) | options | A list of options for the select field | { title: string; value: string; }[] | [ ] | onSelect | Funtion to trigger when an item is selected. It returns the field name and then returns a single string for single select and an array of strings for multi select | (value: string \| string[] \| null, name: string) => void | | dropdownIcon | Custom icon for dropdown caret | string \| React.ReactNode \| null | | checkmarkIcon | Custom selected item indicator icon | string \| React.ReactNode \| null | | dropdownClass | Custom classname for the dropdown container div. This div wraps the ul tag which in turn wraps the individual li tags | string |
| checkerClass | Custom classname for the selected items indicator icon | string |
| closeOnBlur | Determines if the dropdown should close when outside is clicked or not | boolean | true

🦄 Usage with custom PX - REM unit

Sometimes, you may want to set the default rem unit to 10rem/1px (or any value at all) by adding font-size: 10px (or some kind of viewport based value) to the html tag in order to simplify rem/px unit conversion. This will cause a lot of problems with third party components but don't worry, insect got you!

Just add the following css variable to your main stylesheet and insect will adapt to your new unit.

:root {
  --insect-rem: 10 !important;
}

👷🏽 Contribution Guide

Insect is an opensource project and public contribution is very welcome. You can check Issues for bugs to fix or features to add.

  1. Fork this repository.
  2. Clone the forked repository to your local machine.
  3. Create a new branch with a name like this - feature/name-of-feature.
  4. Run yarn to install dependencies.
  5. Write code and then commit changes.
  6. Run yarn build to compile a build into the dist folder.
  7. Now You can decide to manually copy the index.tsx and index.scss file from here into a local project in order to test the feature/bug you have fixed.
  8. Alternatively, run yarn link in your local insect root folder.
  9. On the local project you want to test the features on, run yarn link 'insect'.
  10. Now navigate back to the terminal on your local insect folder and then run npm link ../path-to-test-project/node_modules/react. This will make insect use the copy of react from your local test project. Now you can test your changes.
  11. After all is done, push to your forked repository and then send a pull request.

⚖️ Licence

MIT (c) Collins Enebeli.