This package offers 3 React components:
- Pluralise
- PrettyDate
- PrettyDateTime
I've found these to be particularly useful and wanted to publish an npm
package to share them.
Testing
There is a set of storybook files you can use in the GitHub repo.
To use:
- Clone the repo
- Install the dependencies
- Use Storybook
git clone https://github.com/davedotdev/candytext
npm install
npm run storybook
To Install and Use in a Project
npm intall @davedotdev/candytext
Pluralise
With the code below, you can increment count from 0 positively and the word apple will be pluralised. Only a text string is returned from this.
import { Pluralise } from '@davedotdev/candytext'
const Demo = () => {
let count = 0
// let count = true // also works with boolean for hard pluralisation
return (
<Pluralise word="apple" count={count}/>
)
}
PrettyDate
PrettyDate accepts a timestamp in one of these forms:
- Javascript Date (string)
- MomentJS (object)
- Epoch in mS or S
- ISO8601 string
It can also handle timezones. If you don't provide one, it guesses at what your browser is configured with.
import { PrettyDate } from '@davedotdev/candytext';
import moment from 'moment-timezone';
const Demo = () => {
let epochTest = 1657113202276 // 6th July 2022 in Europe/London time
let date1 = epochTest
let date2 = new Date(epochTest).toString()
let date3 = moment(epochTest)
let date4 = moment(epochTest).toISOString()
return (
<PrettyDate inputdate={date1}/>
<PrettyDate inputdate={date1} timezone="Europe/London" />
<PrettyDate inputdate={date2} timezone="Australia/Sydney" />
<PrettyDate inputdate={date3} timezone="Africa/Cairo" />
<PrettyDate inputdate={date4} timezone="Asia/Tokyo" />
)
}
PrettyDateTime
PrettyDateTime accepts a timestamp in one of these forms:
- Javascript Date (string)
- MomentJS (object)
- Epoch in mS or S
- ISO8601 string
It can also handle timezones. If you don't provide one, it guesses at what your browser is configured with.
import { PrettyDateTime } from '@davedotdev/candytext';
import moment from 'moment-timezone';
const Demo = () => {
let epochTest = 1657113202276 // 16:28 PM 6th July 2022 in Europe/London time
let date1 = epochTest
let date2 = new Date(epochTest).toString()
let date3 = moment(epochTest)
let date4 = moment(epochTest).toISOString()
return (
<PrettyDateTime inputdate={date1}/>
<PrettyDateTime inputdate={date1} timezone="Europe/London" />
<PrettyDateTime inputdate={date2} timezone="Australia/Sydney" />
<PrettyDateTime inputdate={date3} timezone="Africa/Cairo" />
<PrettyDateTime inputdate={date4} timezone="Asia/Tokyo" />
)
}
Go to the GitHub repository: https://github.com/davedotdev/candytext and create an issue with the following detail.
- What did you use?
- What version?
- What version of React?
- What was the input?
- What was the Output?
- Other detail
- Any information on a fix suggestion is welcome
Add a test, add a Storybook
story and throw a PR over to GitHub.
Because you're a kind soul >> https://www.buymeacoffee.com/davedotdev
Apache2. See License file on the repo.