Kit-components-ui NPM

kit-components from Kit-elements

kit-components es un catalogo de componentes de UI, funcionales y personalizables

Video demo

Instalacion

Instala con npm:

 npm install kit-components-ui

Lista de componentes

CarrouselImages
Collapse
Loader
Modal
Toggle

Uso

CarrouselImages

import { CarrouselImages } from "kit-components-ui";

function App() {
  const arrImages = [img1, img2, img3, ...]
  return (
    <ContainerViews images={arrImages} width="100%"  />
  );
};

Props	Uso	Tipo
images	imagenes de muestra el slider	array
auto	para el paso de images automatico	boolean
time	tiempo de muestra de cada imagen	number
width	ancho del componente	string, recibe px o %
height	alto del componente	string, recibe px o %

Collapse

import { Collapse } from "kit-components-ui";

function App() {
  return (
    <Collapse title="titulo del componente" bg="dark">
      <p>lorem ipsum... </p>
    </Collapse>
  );
}

Props	Uso	Tipo
children	Componente contenedor	ReactNode
title	titulo del componente	string
bg	nombre de background	string, recibe dark o light
width	ancho del componente	string, recibe px o %

Loader

import { Loader } from "kit-components-ui";

function App() {
  return <Loader />;
}

Modal

import { Modal } from "kit-components-ui";

function App() {
  return (
    <Modal titleButton="Click">
      <h2>Titulo del modal</h2>
      <p>lorem ipsum... </p>
    </Modal>
  );
}

Props	Uso	Tipo
children	Componente contenedor	ReactNode
titleButton	titulo del botton para abrir el modal	string

Toggle

import { Toggle } from "kit-components-ui";

function App() {
  const showMessage = () => {
    alert("¡Hello world!");
  };

  return <Toggle onClick={showMessage} />;
}

Props	Uso
onClick	para ejecutar una función al hacer click

Experience

import { Experience } from "kit-components-ui";

function App() {
  const experience = {
    job_name: "Web development",
    company: "Your company",
    first_date: "22 April",
    last_date: "20 December",
    description:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, magni numquam delectus, autem fugiat ipsa nesciunt optio provident distinctio, dicta enim fugit ducimus? Nobis placeat quia quos labore amet? Animi!",
    link: "your-link",
    theme: "dark",
  };

  return <Experience experience={experience} />;
}

Props	Uso
job_name	Nombre del puesto de trabajo
company	Nombre de la empresa en la que estuviste
first_date	Fecha de inicio del trabajo
last_date	Fecha de término del trabajo
description	Descrición de tu función dentro de la empresa
link	Puedes agregar un link si quieres
theme	Por defecto es light, puedes agregar dark