Formatizer

💪 Peer dependencies

You need these packages to install Formatizer.

React

🚀 Installation

To install formatizer :

With Yarn, yarn add formatizer
Or, with NPM, npm install formatizer

☀️ 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. 😄

⚙️ Options

<Formatizer> just need a children message : the string you want format.

👀 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>
);

👀 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 ! 🎉

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

Spoiler

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. 😎, ⭐, ❤️, or other...) or with Smiley :-P :

const message = ':star:';
<Formatizer>{message}</Formatizer>;
// Output: An Emoji ⭐️ !

Picker 😎 :

import { Picker } from 'formatizer';
// onChange = return data @ emoji
<Picker onChange={data => console.log(data)} />;

Tips 💡

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.

🚧 Tests

You can run tests with:

yarn test: Execute all tests, one time.
yarn test:one: Execute one test,
- Example ▶️ yarn test:one tests/components/Machin.test.js

👥 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 🐶.

License

MIT License.

O-clock-Dev/formatizer