Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/martinalexanderflorestorres/product-variants-react
Agrega variantes a un producto en React
https://github.com/martinalexanderflorestorres/product-variants-react
Last synced: 7 days ago
JSON representation
Agrega variantes a un producto en React
- Host: GitHub
- URL: https://github.com/martinalexanderflorestorres/product-variants-react
- Owner: MartinAlexanderFloresTorres
- Created: 2024-04-08T21:58:27.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-04-09T16:16:38.000Z (7 months ago)
- Last Synced: 2024-11-08T20:09:26.333Z (7 days ago)
- Language: TypeScript
- Homepage: https://product-variant-react.netlify.app/
- Size: 133 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Product Variants React
Agrega variantes a un producto en React.
## Instalación
Para instalar `product-variants-react`, puedes utilizar npm o yarn:
```bash
npm install product-variants-react
```
# o
```bash
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:
```jsx
import 'product-variants-react/dist/bundle.css';
import { Variations, VariationProvider } from 'product-variants-react';
// Dentro de tu aplicación
export default function App() {
return (
);
}
```
# Ejemplo estilizando el boton de agregar una nueva variacion:
```jsx
import 'product-variants-react/dist/bundle.css';
import { Variations, VariationProvider, useVariants } from 'product-variants-react';
function ButtonNewVariation() {
const { openModalVariation } = useVariants();
return (
Agregar variaciones
);
}
export default function App() {
return (
);
}
```
## Hook useVariants
Puede utilizar el hook useVariants para acceder a las propiedades proporcionadas por VariationContext. Por ejemplo:
```jsx
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.
```jsx
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.
```jsx
```
```jsx
```
## 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.
```typescript
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`:
```typescript
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:
```jsx
import 'product-variants-react/dist/bundle.css';
import { Variations, VariationProvider } from 'product-variants-react';
export default function App() {
return (
);
}
```
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!