Formatizer NPM

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 or npm install
Launch watcher via yarn start or npm 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 file picker.css. You can find this file in folder example/assets
For a better experience when you use Snippet Code and Code, please install and use font Menlo... You can look at the example folder if you want an example.