# react-marcat-dropdown

> A simple dropdown component

Latest version **1.0.5** (published 2023-05-17) · ISC license · 0 weekly downloads

## Install

```sh
npm install react-marcat-dropdown
pnpm add react-marcat-dropdown
yarn add react-marcat-dropdown
bun add react-marcat-dropdown
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.5 |
| Published | 2023-05-17 |
| First published | 2023-05-03 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Anthony Marcato |
| Maintainers | marcat |
| Keywords | react, typescript, dropdown |

## Links

- npm: https://www.npmjs.com/package/react-marcat-dropdown
- Repository: https://github.com/Marcat-A/React-dropdown
- Homepage: https://github.com/Marcat-A/React-dropdown#readme
- Issues: https://github.com/Marcat-A/React-dropdown/issues
- npm.io page: https://npm.io/package/react-marcat-dropdown

## Dependencies (2)

- [styled-components](https://npm.io/package/styled-components.md) ^5.3.10
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.26

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.5 (latest) — 2023-05-17
- 1.0.4 — 2023-05-17
- 1.0.3 — 2023-05-04
- 1.0.2 — 2023-05-04
- 1.0.1 — 2023-05-03
- 1.0.0 — 2023-05-03

## README

# React-Marcat-Dropdown

## Requirements

Before getting started, make sure you have the following installed:

- Node.js: [Download and install Node.js](https://nodejs.org) (v15min)
- React : [Install and install React](https://react.dev)

## Used

Styled-component was used on this project, please check if there are any compatibility issues before importing the component.

## Installation

Install this package:

```shell
npm install react-marcat-dropdown
```

Import the DropdownInput component:

```js
import DropdownInput  from "react-marcat-dropdown/dropdown";
```

## Description
This component renders a custom dropdown input that can be used to select one option from a list of options. The component is implemented using styled-components and is fully customizable.

## Props

- `name`: string (required) - The name of the input.
- `data`: string[] (required) - An array of strings that represents the list of options.
- `personnalId`: string (optional) - Id for the selector.
- `defaultText`: string (optional) - The default text that appears in the dropdown before an option is selected.
- `fontSize`: string (optional) - The font size for the dropdown. Defaults to "1em".
- `color`: string (optional) - The color of the selected option text. Defaults to "rgba(0,0,0,0.25)".
- `borderColor`: string (optional) - The color of the dropdown border. Defaults to "1px solid rgba(0,0,0,0.25)".
- `borderRadius`: string (optional) - The border radius of the dropdown. Defaults to "5px".
- `scrollBarBackgroundColor`: string (optional) - The background color of the scrollbar. Defaults to "rgba(0,0,0,0.25)".
- `scrollBarThumbColor`: string (optional) - The color of the scrollbar thumb. Defaults to "rgba(0,0,0,0.5)".
- `scrollBarWidth`: string (optional) - The width of the scrollbar. Defaults to "8px".
- `scrollBarRadius`: string (optional) - The border radius of the scrollbar. Defaults to "10px".
- `selectBoxColor`: string (optional) - The background color of the dropdown options. Defaults to "#ffffff".
- `selectBoxOptionsColor`: string (optional) - The color of the dropdown options text. Defaults to "rgba(0,0,0,0.25)".
- `labelled`: boolean (optional) - Whether to include a label for the input. Defaults to false.

## State

The component uses the `useState` hook to keep track of the selected option. When an option is selected, the state is updated accordingly.

## Functions

- `handleChange`: This function is called whenever the selected option changes. It updates the state with the new selected option.

## Usage

```tsx
import React from 'react';
import DropdownInput  from "react-marcat-dropdown/dropdown";

const options = ['Option 1', 'Option 2', 'Option 3'];

const MyComponent = () => {
  return (
    <DropdownInput
      name="myDropdown"
      data={options}
      defaultText="Select an option"
      color="red"
      borderColor="2px solid red"
      borderRadius="10px"
      scrollBarBackgroundColor="#f0f0f0"
      scrollBarThumbColor="#c5c5c5"
      scrollBarWidth="12px"
      scrollBarRadius="20px"
      selectBoxColor="#ebebeb"
      selectBoxOptionsColor="#333333"
      labelled
      personnalId="selector"
      fontSize="1em"
      required
    />
  );
};
```

In the above example, a `DropdownInput` component is rendered with some custom props. The `options` array is passed as the `data` prop to populate the dropdown. The `defaultText`, `color`, `borderColor`, `borderRadius`, `scrollBarBackgroundColor`, `scrollBarThumbColor`, `scrollBarWidth`, `scrollBarRadius`, `selectBoxColor`, and `selectBoxOptionsColor` props are used to customize the appearance of the dropdown. Finally, the `labelled` prop is set to `true` to include a label for the input.

---
_Source: https://npm.io/package/react-marcat-dropdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._