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

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.

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.

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)"
  ...
/>

This section outlines the usage of the accepted props

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 ( <<< )

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!'
  ...
/>

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"
    ...
  />

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}
    ...
  />

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"
  />

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

HeadingCode example

  <Text 
    element="heading"
  />

Subheading Code example

  <Text 
    element="subHeading"
  />

Paragraph Code example

  <Text 
    element="paragraph"
  />

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.

the project have already be setup to run locally, We use Storybook to run locally. After pulling the project, Run:

npm install

Then, Run

npm run storybook

MIT © Jones B gabriel · GitHub @Binadiegha / Jones B Gabriel