Package Exports

transparent-gradient
transparent-gradient/src/@types/tgTypes.ts
transparent-gradient/src/Tgradient.jsx
transparent-gradient/src/Tgradient.tsx
transparent-gradient/src/class/tGradient.ts
transparent-gradient/src/transparentGradient.ts

Readme

🍀 Transparent gradient

DOCS

Index

JS React

Hello

Hello, families of developers~ This is a real transparent gradient, not a fake transparent one. I hope it will be helpful for your front desk development.

Installation

npm i transparent-gradient

What does it look like? React

Tgradient

interface ITGprops = {
  //direction gradient
  dir?: string;
  children?: React.ReactNode | undefined;
  //parent className
  wrapperClass?: string;
  //className
  className?: string;
}

import { Tgradient } from "transparent-gradient";

<Tgradient dir={"up"}>
  <p>transparent wow</p>
</Tgradient>

What does it look like? JS

import { TGradient } from "transparent-gradient";

//target
const content = document.querySelector('.target')
new TGradient(target, direction)

First, you have to be the target for the gradient. The second is the direction.('right', 'bottom', 'top', 'left')

You need to apply position: relative to the parent element.

This is an example of use.

func	Direction	desc
new TGradient(target, 'right')	right	new TGradient(target, 'right') creates a gradient from right to left.
new TGradient(target, 'left')	left	new TGradient(target, 'left') creates a gradient from left to right.
new TGradient(target, 'top')	top	new TGradient(target, 'top') creates a gradient from top to bottom.
new TGradient(target, 'bottom')	bottom	new TGradient(target, 'bottom') creates a gradient from bottom to top.

example url - [https://codesandbox.io/s/transparent-gradient-profile-dmj28y]

2023.03.13/transparent-gradient/mr.chu