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.
Running react-text-colorfy locally
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
📝 Licence
MIT © Jones B gabriel · GitHub @Binadiegha / Jones B Gabriel
