React-text-colorfy NPM

React-text-colorfy

A simple and easy to use react component that helps you add gradient or color to text in your react project.

🔍 Overview

We have observed that most developers would like to speed up the process of applying color or a gradient to specific text or a string of sentences during development. There is a lot of CSS code needed. especially if your app's colors vary between distinct locations. This is why I created react-text-colorfy, a straightforward component-based solution that enables developers to add colors or gradients to headings and other text components / tags.

🛠️ Installation

Adding react-text-colorfy to your project requires just a few lines of code. tho, it is not worthy that this library have a few dev dependencies: react and styled-components.

to use this package, ensure you have npm installed on your computer. if you dont already have Nodejs installed, head to https://nodejs.org/en/ and download Nodejs to your computer.

After setup, Run:

npm install react-text-colorfy

...and that's it. you are ready to use react-text-colorfy in your project.

👨🏽‍💻 Usage

To use react-text-colorfy's text component in your react project, import the package:

import Text from 'react-text-colorfy'

Now you can use the react-text-colorfy Text component in your application.

Code example

<Text 
  element="heading"
  color="rgb(64, 227, 212)"
  ...
/>

Result

📚 Documentation

This section outlines the usage of the accepted props

content

The content prop accept the text to be passed into the component. it accepts a string with the text intended to be colored enclosed in tripple angle bracket ( <<< )

syntax

the major syntax to note is the <<< and >>> syntax. text enclosed in the triple-angle-brackets are the target text that change in color.

Code example

<Text 
  content='this is <<< Colored >>> and this is <<< Colored too >>>. Hurray!'
  ...
/>

color

The color prop accepts any CSS color value or name passed as a string: HEX, rgb, color name, etc are all accepted. see the CSS color reference for more insight on css colors. defaults to the project's primary color.

Code example

  <Text 
    color="orange"
    ...
  />

Result

gradient

The gradient prop accepts an object with two required properties. to and colors. The to key takes any CSS gradient Direction or angle property. See the CSS gradient reference for more insight. The second required property with the key of colors takes in an array of gradient colors as it's value.

Code example

const myGradient = {
  to: 'bottom left',
  colors: ['rgb(64, 227, 212)', 'red', '#45af5b']
 }
  <Text 
    gradient={myGradient}
    ...
  />

Result

size

The size prop takes in any CSS font-size property. see the CSS font-size reference here. it defaults to the default font size.

Code example

  <Text 
    size="20px"
  />

element

The element prop takes a string. This string determines the tag that holds the string. It can be a heading, sub-heading or a paragraph tag.

Prop values and meaning | Prop name | HTML tag |
|:--- |:--- | |heading | H | <h1> | |subHeading | S | <h2> | |paragraph | P | <p> |

HeadingCode example

  <Text 
    element="heading"
  />

Heading result

Subheading Code example

  <Text 
    element="subHeading"
  />

Subheading result

Paragraph Code example

  <Text 
    element="paragraph"
  />

Paragraph result

📥 Contributing

When making a contribution to this repository, kindly open an issue to first explain the change you want to make. This could be a bug report or a feature request. You are welcome to work with a maintainer to create a pull request after they have prioritized your problem. You are welcome to concurrently open an issue and pull request if your modification is straightforward or small.

Please be aware that we have a code of conduct, and that you must abide by it at all times when dealing with the project.