Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/binadiegha/react-text-colorfy
A simple react library/component to help color or add gradient to text inline. saving you time and hassle of writing custom css everytime
https://github.com/binadiegha/react-text-colorfy
npm package react react-llibrary yarn
Last synced: 9 days ago
JSON representation
A simple react library/component to help color or add gradient to text inline. saving you time and hassle of writing custom css everytime
- Host: GitHub
- URL: https://github.com/binadiegha/react-text-colorfy
- Owner: binadiegha
- License: mit
- Created: 2022-12-29T18:43:42.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-01-03T20:53:18.000Z (almost 2 years ago)
- Last Synced: 2024-10-28T10:51:46.101Z (20 days ago)
- Topics: npm, package, react, react-llibrary, yarn
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-text-colorfy
- Size: 1.59 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```javascript
import Text from 'react-text-colorfy'
```
Now you can use the ***react-text-colorfy*** `Text` component in your application.
*Code example*
```javascript
```
##### *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*
```javascript
```
### 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*
```javascript
```
##### *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*
```javascript
const myGradient = {
to: 'bottom left',
colors: ['rgb(64, 227, 212)', 'red', '#45af5b']
}
```
##### *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*
```javascript
```
### 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 | `
` |
|subHeading | S | `` |
|paragraph | P | `
` |
*HeadingCode example*
```javascript
```
##### *Heading result*
*Subheading Code example*
```javascript
```
##### *Subheading result*
*Paragraph Code example*
```javascript
```
##### *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