Website

English

gradient-react is a React component library that simplifies the creation of gradient elements. It includes components like GradientCircle, GradientContent, and GradientContain to help you design attractive user interfaces with gradients easily.

Installation

npm install gradient-react

or you can use yarn

yarn add gradient-react

Usage Example

import {
	GradientContain,
	GradientCircle,
	GradientContent,
} from 'gradient-react';

const MyComponent = () => (
	<GradientContain styles={{ margin: '100px', padding: '20px' }}>
		<GradientCircle
			color1='#7701cc'
			color2='#01a7cc'
			width='350px'
			height='350px'
		/>
		<GradientCircle
			color1='#eb540e'
			blur='50'
			color2='#cc0101'
			width='450px'
			height='450px'
		/>
		<GradientContent>
			<h2>Section title</h2>
			<p>Generic text</p>
		</GradientContent>
	</GradientContain>
);

Components

GradientCircle

The GradientCircle component allows you to create circles with custom gradients.

import { GradientCircle } from 'gradient-react';

const MyComponent = () => (
	<GradientCircle
		color1='#7701cc'
		color2='#01a7cc'
		width='350px'
		height='350px'
		styles={{ left: '130px', top: '300px' }}
	/>
);

| Property | Description | Default Value | | -------- | ------------------------------------ | ------------- | | color1 | The color of the circle's center | '#ED0101' | | color2 | The color of the circle's outer edge | '#CC2A01' | | width | The width of the circle | '200px' | | height | The height of the circle | '200px' | | blur | The intensity of the circle's blur | '80' | | styles | CSS styles applied to the container | {} |

GradientContent

GradientContent is used to wrap content within an area with a gradient background.

import { GradientContent } from 'gradient-react';

const MyComponent = () => (
	<GradientContent
		styles={{
			display: 'flex',
			flexDirection: 'column',
			alignContent: 'center',
			justifyContent: 'center',
			width: '100%',
		}}
	>
		<h2>Section Title</h2> <p>Generic text</p>
	</GradientContent>
);

| Property | Description | Default Value | | -------- | ----------------------------------- | ------------- | | styles | CSS styles applied to the container | {} |

GradientContain

GradientContain is a container that can house multiple components with gradients.

import {
	GradientContain,
	GradientCircle,
	GradientContent,
} from 'gradient-react';

const MyComponent = () => (
	<GradientContain styles={{ margin: '100px', padding: '20px' }}>
		<GradientCircle
			color1='#7701cc'
			color2='#01a7cc'
			width='350px'
			height='350px'
		/>
		<GradientCircle
			color1='#eb540e'
			blur='50'
			color2='#cc0101'
			width='450px'
			height='450px'
		/> <GradientContent>
			<h2>Section Title</h2> <p>Generic text</p>
		</GradientContent>
	</GradientContain>
);

| Property | Description | Default Value | | -------- | ----------------------------------- | ------------- | | styles | CSS styles applied to the container | {} |

Contributing

If you would like to contribute to this library, you're welcome!

Spanish

gradient-react es una librería de componentes React que facilita la creación de elementos con gradientes. Incluye componentes como GradientCircle, GradientContent y GradientContain para ayudarte a diseñar interfaces de usuario atractivas con gradientes de manera sencilla.

Instalación

npm install gradient-react

o puedes usar yarn

yarn add gradient-react

Ejemplo de uso

import {
	GradientContain,
	GradientCircle,
	GradientContent,
} from 'gradient-react';

const MyComponent = () => (
	<GradientContain styles={{ margin: '100px', padding: '20px' }}>
		<GradientCircle
			color1='#7701cc'
			color2='#01a7cc'
			width='350px'
			height='350px'
		/>
		<GradientCircle
			color1='#eb540e'
			blur='50'
			color2='#cc0101'
			width='450px'
			height='450px'
		/>
		<GradientContent>
			<h2>Título de la sección</h2>
			<p>Texto genérico</p>
		</GradientContent>
	</GradientContain>
);

Componentes

GradientCircle El componente GradientCircle te permite crear círculos con gradientes personalizados.

import { GradientCircle } from 'gradient-react';
import { GradientCircle } from 'gradient-react';

const MyComponent = () => (
	<GradientCircle
		color1='#7701cc'
		color2='#01a7cc'
		width='350px'
		height='350px'
		styles={{
			left: '130px',
			top: '300px',
		}}
	/>
);

| Propiedad | Descripción | Valor por Defecto | | --------- | ------------------------------------- | ----------------- | | color1 | Color del centro del círculo | '#ED0101' | | color2 | Color del borde exterior del círculo | '#CC2A01' | | width | Ancho del círculo | '200px' | | height | Altura del círculo | '200px' | | blur | Intensidad del desenfoque del círculo | '80' | | styles | Estilos CSS aplicados al contenedor | {} |

GradientContent

GradientContent se utiliza para envolver contenido dentro de un área con un fondo de gradiente.

import { GradientContent } from 'gradient-react';

const MyComponent = () => (
	<GradientContent
		styles={{
			display: 'flex',
			flexDirection: 'column',
			alignContent: 'center',
			justifyContent: 'center',
			width: '100%',
		}}
	>
		<h2>Título de la sección</h2>
		<p>Texto genérico</p>
	</GradientContent>
);

| Propiedad | Descripción | Valor por Defecto | | --------- | ----------------------------------- | ----------------- | | styles | Estilos CSS aplicados al contenedor | {} |

GradientContain

GradientContain es un contenedor que puede albergar varios componentes con gradientes.

import {
	GradientContain,
	GradientCircle,
	GradientContent,
} from 'gradient-react';

const MyComponent = () => (
	<GradientContain styles={{ margin: '100px', padding: '20px' }}>
		<GradientCircle
			color1='#7701cc'
			color2='#01a7cc'
			width='350px'
			height='350px'
		/>
		<GradientCircle
			color1='#eb540e'
			blur='50'
			color2='#cc0101'
			width='450px'
			height='450px'
		/>
		<GradientContent>
			<h2>Título de la sección</h2>
			<p>Texto genérico</p>
		</GradientContent>
	</GradientContain>
);

| Propiedad | Descripción | Valor por Defecto | | --------- | ----------------------------------- | ----------------- | | styles | Estilos CSS aplicados al contenedor | {} |

Contribuir

Si quieres contribuir a esta librería, ¡te damos la bienvenida!