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
Prop name | HTML tag |
---|---|
heading | H | <h1> |
subHeading | S | <h2> |
paragraph | P | <p> |
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