Insect

🛠 Highly customisable, minimalistic input x select field for React.

⚡️ 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

🏁 For Input field type

🔮 For Select field type

🦄 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 inex.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.