npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

product-variants-react

v1.1.2

Published

Agrega variantes a un producto en React

Downloads

13

Readme

Product Variants React

Agrega variantes a un producto en React.

1

image

Instalación

Para instalar product-variants-react, puedes utilizar npm o yarn:

npm install product-variants-react

o

yarn add product-variants-react

Uso

Componente VariationProvider

El componente VariationProvider es un contexto que proporciona variantes de producto y funcionalidades relacionadas a los componentes hijos

Ejemplo usando el componente ya estilizado:

import 'product-variants-react/dist/bundle.css';
import { Variations, VariationProvider } from 'product-variants-react';

// Dentro de tu aplicación
export default function App() {
  return (
    <VariationProvider
      /* Opcional: Establecer un estado inicial para el proveedor de variantes
        store={{
          variations: [],
          variationsSelected: []
        }}
     */
    >
      <div className="container p-4 mx-auto">
        <Variations defaultPrice={100} defaultStock={10} />
      </div>
    </VariationProvider>
  );
}

Ejemplo estilizando el boton de agregar una nueva variacion:

import 'product-variants-react/dist/bundle.css';
import { Variations, VariationProvider, useVariants } from 'product-variants-react';

function ButtonNewVariation() {
  const { openModalVariation } = useVariants();
  return (
    <button type="button" className="flex items-center gap-2 p-1 text-sky-700 hover:underline hover:text-sky-600 transition-all text-sm w-fit" onClick={openModalVariation}>
      <svg xmlns="http://www.w3.org/2000/svg" className="icon icon-tabler icon-tabler-plus" width="20" height="20" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" fill="none" strokeLinecap="round" strokeLinejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
        <path d="M12 5l0 14" />
        <path d="M5 12l14 0" />
      </svg>
      <span>Agregar variaciones</span>
    </button>
  );
}

export default function App() {
  return (
    <VariationProvider
       /* Opcional: Establecer un estado inicial para el proveedor de variantes 
        store={{
          variations: [],
          variationsSelected: [],
        }}
      */
    >
      <div className="container p-4 mx-auto">
        <ButtonNewVariation />
        <Variations.Modal />
        <Variations.Selecteds />
        <Variations.Editor defaultPrice={0} defaultStock={0} />
      </div>
    </VariationProvider>
  );
}

Hook useVariants

Puede utilizar el hook useVariants para acceder a las propiedades proporcionadas por VariationContext. Por ejemplo:

import { useContext } from 'react';
import { VariationContext } from '../provider/VariationProvider';

export function useVariants() {
  return useContext(VariationContext);
}

Este hook le permite acceder a las propiedades como variations, variationsSelected, variantPrices, etc., y utilizarlas para crear su propia lógica.

const { variations, variationsSelected, variantPrices, ... } = useVariants();
// Utilice estas propiedades para su lógica

Props de Variations

defaultPrice: El precio predeterminado del producto. defaultStock: La cantidad predeterminada de stock disponible del producto.

<Variations defaultPrice={100} defaultStock={10} />
<Variations.Editor defaultPrice={100} defaultStock={10} />

Estructura de datos

Las interfaces Variant, VariantValue, VariantPrice, VariantOptionsAndPrices y VariantOption se utilizan para definir la estructura de datos relacionada con las variantes de producto.

export interface Variant {
  id: string;
  name: string;
  title: string;
  usage: boolean;
  values: VariantValue[];
}

export interface VariantOptions  {
  id: string;
  name: string;
  title: string;
  usage: boolean;
}


export interface VariantValue {
  id: string;
  title: string;
}

export interface VariantPrice {
  id: string;
  variant: VariantOptionsAndPrices;
}

export interface VariantOptionsAndPrices {
  options: VariantOption[];
  price: number | string;
  stock: number | string;
}

export interface VariantOption {
  id: string;
  name: string;
  title: string;
}

Opciones de Variantes

Las opciones de variantes definen las características disponibles para un producto. Estas opciones se pueden personalizar según las necesidades del usuario. A continuación, se muestra un ejemplo de cómo se pueden definir las opciones de variantes en el archivo variants.ts:


export const VARIANTS: VariantOptions[] = [
  {
    id: generateId(),
    name: 'size',
    title: 'Tamaño',
    usage: false,
  },
  {
    id: generateId(),
    name: 'color',
    title: 'Color',
    usage: false,
  },
  {
    id: generateId(),
    name: 'material',
    title: 'Material',
    usage: false,
  },
  {
    id: generateId(),
    name: 'style',
    title: 'Estilo',
    usage: false,
   
  },
  {
    id: generateId(),
    name: 'pattern',
    title: 'Patrón',
    usage: false,
   
  },
  {
    id: generateId(),
    name: 'length',
    title: 'Longitud',
    usage: false,
   
  },
  {
    id: generateId(),
    name: 'width',
    title: 'Ancho',
    usage: false,
   
  },
];

En este ejemplo, se definen varias opciones de variantes como 'Tamaño', 'Color', 'Material', etc. Cada opción tiene un nombre único, un título descriptivo y una lista de valores que se pueden asignar a esa opción.

Las opciones de variantes se pueden utilizar para personalizar los productos y permitir a los usuarios seleccionar las características específicas que desean.

Personalización de las Opciones de Variantes y Selecciones Predeterminadas

Además de personalizar las opciones de variantes, también es posible especificar las selecciones predeterminadas para cada variante. Esto se puede lograr utilizando el prop store en el componente VariationProvider, donde se puede incluir una lista de variantes seleccionadas inicialmente.

A continuación, se muestra un ejemplo de cómo se puede personalizar el store para especificar tanto las variantes deseadas como las selecciones predeterminadas:

import 'product-variants-react/dist/bundle.css';
import { Variations, VariationProvider } from 'product-variants-react';

export default function App() {
  return (
    <VariationProvider
      /* optional */
      store={{
        variations: [
          {
            id: 'customSizeId',
            name: 'size',
            title: 'Tamaño Personalizado',
            usage: true,
          },
          {
            id: 'customColorId',
            name: 'color',
            title: 'Color Personalizado',
            usage: true,
          },
        ],
        variationsSelected: [
          {
            id: 'customSizeId',
            name: 'size',
            title: 'Tamaño Personalizado',
            usage: true,
            values: [
              { id: 'medium', title: 'Mediano' }, // Selección predeterminada para tamaño: Mediano
            ],
          },
          {
            id: 'customColorId',
            name: 'color',
            title: 'Color Personalizado',
            usage: true,
            values: [
              { id: 'blue', title: 'Azul' }, // Selección predeterminada para color: Azul
            ],
          },
        ],
      }}
    >
      <div className="container p-4 mx-auto">
        <Variations.Editor defaultPrice={100} defaultStock={10} />
      </div>
    </VariationProvider>
  );
}

En este ejemplo, además de especificar las opciones de variantes personalizadas, también se proporcionan selecciones predeterminadas para cada variante dentro del prop store. Esto permite que las opciones seleccionadas se muestren automáticamente cuando se carga la aplicación, brindando una experiencia más completa al usuario.

Contribución

Si encuentras algún problema o tienes alguna sugerencia para mejorar este paquete, ¡no dudes en abrir un issue o enviar un pull request!