React-calendar-dg NPM

📅 Meu Calendário React

Um componente de calendário moderno, responsivo e minimalista para React, com suporte a modo claro/escuro e seleção de anos.

🚀 Instalação

Para instalar o pacote, execute o seguinte comando:

npm install meu-calendario-react

ou com Yarn:

yarn add meu-calendario-react

📌 Uso Básico

import React, { useState } from "react";
import { Calendar } from "meu-calendario-react";

const App = () => {
  const [selectedDate, setSelectedDate] = useState(null);

  return (
    <div className="flex items-center justify-center h-screen bg-gray-100">
      <Calendar value={selectedDate} onChange={setSelectedDate} />
    </div>
  );
};

export default App;

⚙️ Propriedades (Props)

Prop	Tipo	Padrão	Descrição
`value`	`Date`	`null`	Data selecionada inicialmente.
`onChange`	`(date: Date) => void`	`undefined`	Função chamada quando a data é alterada.
`name`	`string`	`undefined`	Nome do campo (para integração com formulários).

📝 Integração com React Hook Form

Você pode usá-lo dentro de um formulário com react-hook-form:

import { useForm, Controller } from "react-hook-form";
import { Calendar } from "meu-calendario-react";

const Formulario = () => {
  const { control, handleSubmit } = useForm();

  const onSubmit = (data) => {
    console.log("Data selecionada:", data.data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="p-4">
      <Controller
        name="data"
        control={control}
        render={({ field }) => (
          <Calendar {...field} value={field.value} onChange={field.onChange} />
        )}
      />
      <button type="submit" className="mt-4 p-2 bg-blue-500 text-white rounded">
        Enviar
      </button>
    </form>
  );
};

export default Formulario;

🌙 Suporte ao Modo Escuro

O componente detecta automaticamente o tema do sistema e aplica as cores correspondentes. Para garantir que o tema escuro funcione corretamente, certifique-se de que seu projeto tenha suporte ao dark mode.

Caso queira forçar um tema específico, você pode adicionar a classe dark ao html:

<html class="dark">

📌 Recursos

✅ Interface minimalista e moderna ✅ Suporte a modo escuro/claro ✅ Navegação entre meses e anos ✅ Seleção de datas e anos ✅ Integração com react-hook-form ✅ Baseado em date-fns para manipulação de datas