formatizer
v1.5.1
Published
Format easily your message.
Downloads
55
Readme
Formatizer
:muscle: Peer dependencies
You need these packages to install Formatizer.
- React
:rocket: Installation
To install formatizer
:
- With Yarn,
yarn add formatizer
- Or, with NPM,
npm install formatizer
:sunny: Synopsis
With this module, you can format your text more easily. For example, you can format into bold, italic or ~~strike~~ a message, send a smiley, a code snippet or a blockquote... Let's see API Reference for more details. :smile:
:gear: Options
<Formatizer>
just need a children message
: the string you want format.
:eyes: Code Example
/*
* Package Import
*/
import { Formatizer } from 'formatizer';
// Other import...
/*
* Code
*/
const message = '*test*';
/*
* Component
*/
const App = () => (
<div>
<Formatizer>{message}</Formatizer>
// Output: In this example, test is formatted in bold
</div>
);
:eyes: Example
You can also try this example in live :
- Download this repository.
- Install packages via
yarn
ornpm install
- Launch watcher via
yarn start
ornpm start
- Go http://localhost:3333/
- Test it ! :tada:
API Reference
- bold :
const message = '*message*';
<Formatizer>{message}</Formatizer>;
// Output: message in BOLD
- italic :
const message = '_message_';
<Formatizer>{message}</Formatizer>;
// Output: message in ITALIC
- ~~strike~~ :
const message = '~message~';
<Formatizer>{message}</Formatizer>;
// Output: message in STRIKE
- Color #ee1225 :
const message = '#ee1225 or #000';
<Formatizer>{message}</Formatizer>;
// Output: colors red and black
const message = '### Hello ###';
<Formatizer>{message}</Formatizer>;
// Output: A message in spoiler
- Snippet Code :
const message = '```js const a = "string"```';
// You can use : 'apache', 'apacheconf', 'bash', 'sh', 'zsh', 'css', 'xml', 'html', 'xhtml', 'rss', 'atom', 'xjb', 'xsd', 'xsl', 'plist', 'ini', 'json', 'javascript', 'js', 'jsx', 'less', 'markdown', 'md', 'mkdown', 'mkd', 'php', 'scss', 'sql', 'stylus', 'styl' or 'twig',
<Formatizer>{message}</Formatizer>;
// Output: Code Snipper like here !
Code
:
const message = '`const a = "string"`'
<Formatizer>{message}</Formatizer>
// Output: Code
Blockquote :
const message = '> Message';
<Formatizer>{message}</Formatizer>;
// Output: message in Blockquote
- We can format links too.
const message = 'https://github.com/o-clock/formatizer';
<Formatizer>{message}</Formatizer>;
// Output: https://github.com/o-clock/formatizer
const message = '[Formatizer](https://github.com/o-clock/formatizer)';
<Formatizer>{message}</Formatizer>;
// Output: Formatizer (https://github.com/o-clock/formatizer in the href property)
- Emoji with colons (eg. :sunglasses:, :star:, :heart:, or other...) or with Smiley :-P :
const message = ':star:';
<Formatizer>{message}</Formatizer>;
// Output: An Emoji ⭐️ !
- Picker :sunglasses: :
import { Picker } from 'formatizer';
// onChange = return data @ emoji
<Picker onChange={data => console.log(data)} />;
Tips :bulb:
If you're using
Picker
, you need add the css filepicker.css
. You can find this file in folderexample/assets
For a better experience when you use
Snippet Code
andCode
, please install and use fontMenlo
... You can look at theexample
folder if you want an example.
:construction: Tests
You can run tests with:
yarn test
: Execute all tests, one time.yarn test:one
: Execute one test,- Example :arrow_forward:
yarn test:one tests/components/Machin.test.js
- Example :arrow_forward:
:busts_in_silhouette: Contributors
Want to contribute ?
- All contributions are welcome !
- Download this repository.
- Install dependencies.
- Run
yarn start
- Let's go http://localhost:3333/
- Let's go edit
src
folder
This project has adopted a small Husky :dog:.
License
MIT License.