Categories
Plugins

pretty-letters

PrettyLetters
PrettyLetters is a Javascript plugin highly inspired by Lettering.js, why do not use the other one? because that one it is only available for jQuery and it is not registered in npm.
Basically what this plugin does is to give you the ability and freedom to style any HTML tag that has some text.
How to use the plugin
You will only need prettyLetters.min.js.
You can grab them on unpkg CDN and use it like this:
  
or find it under /dist/** folder and use it like this:
  
or use npm to install the plugin and require the module within your project.
const prerttyLetters = require( ‘pretty-letters’ ); prettyLetters( ‘h2.title’, {options});
How?
When you pass any CSS selector to the function prettyLetters(‘.myClass’) it will split the text in letters and wrap each one of those with another HTML tag so you have absolute control over the text.
Foo

  F  o  o

 Foo Bar

      F    o    o        B    a    r  

 Foo Bar


How to use it with React
const prettyLetter = require( ‘pretty-letters’ ); class App extends Component {  componentDidMount() {    var options = {      groupClass: ‘lol-‘,      groupTag: ‘div’    };    prettyLetter( ‘h1’, options );  }  render() {    return(      

        

Helllo World

      

    );  }}
How to use it with Angular
            {{title}}    

  


const prettyLetter = require( ‘pretty-letters’ ); angular.module(‘playground’, [])  .directive(‘prettyLetter’, function ($timeout) {    return {      restrict: ‘A’,      link: function (scope, element, attrs) {        // attrs[‘prettyLetter’] === ‘.selector’        $timeout(function() {          prettyLetter(            attrs[‘prettyLetter’],            scope.prettyLetterOpts          );        })      }    };  })  .controller(‘angularCtrl’, function ( $scope ) {    $scope.title = ‘prettyForm in Angular’;    $scope.prettyLetterOpts = {      groupClass: ‘lol-‘,      groupTag: ‘div’    };  });
The plugin is set with some default options that can be overwritten by passing an object as second argument to the function.
The possible options are for the CSS classes and HTML wrapper elements that will generate the function.
// default valuesvar options = {  charClass: ‘char-‘,  groupClass: ‘group-‘,  charTag: ‘span’,  groupTag: ‘span’,}; prettyLetters( ‘selector’, options); // the jQuery version would be$( ‘selector’ ).prettyLetters( options );
That is pretty much what this plugin can do.

GitHub Repo