JSPM – @jorgeetrejoo/react-ui-components@0.0.6

Package Exports

@jorgeetrejoo/react-ui-components
@jorgeetrejoo/react-ui-components/dist/index.js
@jorgeetrejoo/react-ui-components/dist/index.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jorgeetrejoo/react-ui-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Instalación

# npm
npm install @jorgeetrejoo/react-ui-components

# pnpm
pnpm add @jorgeetrejoo/react-ui-components

# yarn
yarn add @jorgeetrejoo/react-ui-components

Uso

Para utilizar esta biblioteca, importa los estilos y componentes necesarios.
Los estilos importalos en tu archivo principal (index.js, App.js, etc).

// Importar estilos (requerido)
import "@jorgeetrejoo/react-ui-components/dist/index.css";

// Importar componentes
import {Button, Input} from "@jorgeetrejoo/react-ui-components";

function App() {
  return (
    <div className="p-4">
      <h2 className="text-xl font-bold mb-4">Formulario de contacto</h2>
      <div className="space-y-4">
        <Input placeholder="Nombre completo" />
        <Input placeholder="Email" type="email" />
        <Button>Enviar</Button>
      </div>
    </div>
  );
}

Componentes

Botón

Un componente de botón versátil y personalizable.

Importación

import {Button} from "@jorgeetrejoo/react-ui-components";

<Button>Enviar</Button>;

Props

Prop	Tipo	Opciones	Default	Descripción
variant	string	'primary', 'secondary', 'outline', 'ghost'	'primary'	Estilo visual del botón
size	string	'sm', 'md', 'lg'	'md'	Tamaño del botón
disabled	boolean	-	false	Deshabilita el botón
className	string	-	''	Clases CSS adicionales

Input

Un componente de input versátil y personalizable.

Importación

import {Input} from "@jorgeetrejoo/react-ui-components";

<Input placeholder="Nombre completo" />;

Props

Prop	Tipo	Default	Descripción
type	string	'text'	Tipo de input (text, email, password, etc.)
placeholder	string	''	Texto placeholder
disabled	boolean	false	Deshabilita el input
error	boolean	false	Aplica estilo de error
className	string	''	Clases CSS adicionales