Faradays Components

Versión: 0.0.3

Spinner

El componente Spinner es un elemento visual que muestra al usuario que una operación está en progreso y que debe esperar mientras se carga contenido o se completa una acción en segundo plano.

Instalación

Para instalar este componente, utiliza npm o yarn:

npm install faradaycomp

import { Spinner } from 'faradaycomp';

const app = () => {
    return (
        <div>
            <Spinner color="blue" size={50} />
        </div>
    );
};

export default app;

Props:

• color (string): Define el color del loader. Debe ser un valor válido en CSS, como un nombre de color ("red"), un valor hexadecimal ("#3498db"), o cualquier otro formato de color compatible.

• size (number): Define el tamaño del loader en píxeles. No incluyas la unidad de medida; el valor será automáticamente interpretado como píxeles.

NavbarScroll

Un componente React que oculta o muestra la barra de navegación según la dirección del scroll.

Instalación

Para instalar este componente, utiliza npm o yarn:

npm install faradaycomp

Uso

Aquí tienes un ejemplo básico de cómo usar el componente NavbarScroll:

import './navMenu.css';
import { NavbarScroll } from 'faradaycomp';

const NavMenu = () => {
    return (
        <NavbarScroll>
            <div className="navMenu">
                <h2>Contenido</h2>
            </div>
        </NavbarScroll>
    );
};

export default NavMenu;

Estilos

Aplica estilos a la clase de tu componente (en este caso, navMenu) para personalizar la barra de navegación. Es importante que incluyas las propiedades width: 100% y height: 80px (entre 70 y 100 pxs de alto) para garantizar el funcionamiento correcto. Aquí tienes un ejemplo:

.navMenu {
    width: 100%; 
    height: 80px;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
}