hy-textgradient

Text Gradient for React v.1.0

ReactJS modules are simple but have many advantages, one of which is that you can customize them freely.

Installation

npm install hy-textgradient

Example Project Implemented

/* Add - Impport module */
import TextGradient from "hy-textgradient";
/*----*/

const App = () => {
  return (
    <div>
    
      /* Add - Default components */
      <TextGradient colors={["#ff0000", "#ffff00", "#00ff00"]} >	
        Your Text To Gradient Here
	  </TextGradient>
      /*----*/
      
    </div>
  );
};

export default App;

Customization

Atribute	Key	Description	Status
colors="key?"	{["#ff0000", "#ffff00", "#00ff00"]}	Customize color, 2+ colors supported	required
direction="key?"	horizontal vertical diagonal-left diagonal-right none	Customize gradient direction	optional
decoration="key?"	underline overline line-through none	Customize text decoration	optional
style="key?"	normal bold italic	Customize text style	optional
size="key?"	normal s m x xl xxl xxl	Customize text size	optional
font="key?"	Name font family Support all web font	Customize font style	optional
className="key?"	Support variable css	Customize with css	optional

Full Customization

<TextGradient className="" colors={["#ff0000", "#ffff00", "#00ff00"]} size="xxl" style="bold" decoration="underline" direction="diagonal-left" font="Arial">
  Your Text To Gradient Here
</TextGradient>

Happy Coding :)