TimePicker-dg

Este é um componente de seleção de horário altamente personalizável, compatível com todos os navegadores e projetado para integração fácil em projetos React.

📦 Instalação

Instale o pacote via npm:

npm install time-picker-dg

Ou via Yarn:

yarn add time-picker-dg

🚀 Uso Básico

Aqui está um exemplo de como usar o CustomTimePicker em seu projeto React:

import React, { useState } from "react";
import CustomTimePicker from "time-picker-dg";

const App = () => {
  const [time, setTime] = useState("");

  return (
    <div>
      <h1>Escolha o horário</h1>
      <CustomTimePicker
        label="Selecionar Horário"
        onChange={(time) => setTime(time)}
      />
      <p>Horário selecionado: {time}</p>
    </div>
  );
};

export default App;

⚙️ Propriedades do Componente

| Propriedade | Tipo | Descrição | Valor Padrão | |-------------------|----------------------|-------------------------------------------------------------------------------------------------|------------------| | label | string | Define o texto do rótulo exibido acima do componente. | undefined | | value | string | Valor inicial do horário no formato HH:mm. | undefined | | colorSelected | string | Cor para destacar o item selecionado. | "#3b82f6" | | colorText | string | Cor do texto dentro do componente. | "#374151" | | colorBorder | string | Cor da borda do botão e do dropdown. | "#E5E7EB" | | colorHover | string | Cor de fundo ao passar o mouse sobre uma opção no dropdown. | "#F3F4F6" | | colorLabel | string | Cor do rótulo do componente. | "#6B7280" | | icon | ReactNode | Ícone exibido ao lado do rótulo e dentro do botão. | <IoTimeOutline> | | onChange | (time: string) => void | Função chamada ao selecionar um horário, retorna o valor no formato HH:mm. | Obrigatório | | containerClassName | string | Classe CSS para estilizar o container do componente. | undefined | | className | string | Classe CSS para estilizar o botão de seleção de horário. | undefined |

💡 Exemplos de Uso

🔹 Com valores padrão

<CustomTimePicker
  label="Selecionar Horário"
  onChange={(time) => console.log(`Horário selecionado: ${time}`)}
/>

🎨 Personalizado

<CustomTimePicker
  label="Horário de Início"
  value="08:30"
  colorSelected="#ff5722"
  colorText="#212121"
  colorBorder="#b0bec5"
  colorHover="#ffccbc"
  colorLabel="#ff5722"
  icon={<CustomIcon />}
  containerClassName="custom-container"
  className="custom-button"
  onChange={(time) => console.log(`Horário selecionado: ${time}`)}
/>

🎨 Estilização

O componente permite que o usuário defina estilos próprios, ao invés de trazer um CSS embutido. Para personalizar, basta sobrescrever os estilos do botão e do dropdown com seu próprio CSS:

Exemplo de Sobrescrita com Tailwind CSS

.custom-container {
  @apply flex flex-col items-center;
}

.custom-button {
  @apply bg-blue-500 text-white border border-blue-600 hover:bg-blue-700;
}

.custom-timepicker-dropdown {
  @apply bg-white border border-gray-300 shadow-lg rounded-md;
}

Exemplo de Sobrescrita com CSS Puro

.custom-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-button {
  background-color: #3b82f6;
  color: white;
  border: 1px solid #2563eb;
}

.custom-timepicker-dropdown {
  background-color: white;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

🎯 Funcionalidades

• ✅ Totalmente personalizável com cores e ícones.
• ✅ Compatível com todos os navegadores modernos.
• ✅ Responsivo e fácil de adaptar a qualquer design.
• ✅ Efeitos suaves de fade-in e fade-out no dropdown.
• ✅ Fecha automaticamente ao clicar fora.

📜 Licença

Este projeto está licenciado sob a MIT License.

🛠 Desenvolvido com ❤️ por David Gilmar Jr.