• Stars
    star
    1,264
  • Rank 35,809 (Top 0.8 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated almost 2 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

๐ŸŒป A lightweight plugin to embed emojis, media, maps, tweets, code and more. โœจ

Build Status npm Twitter

A lightweight JavaScript plugin to embed emojis, media, maps, tweets, code and services.

This is the documentation for v5. If you are looking for docs of v4 you can get them here.

Edit embed.js - demo

Features

  • Supported: supports IE8+ (assuming Promise is polyfilled)
  • Plugin Based: only load what you want.
  • Isomorphic: Can be used both on server and client side.
  • Customizable: So much that creating a custom plugin is also few lines of code.
  • Modern: written in ES2015

Contents

Installation

To install the stable version:

npm install --save embed-js

CDN

https://unpkg.com/embed-js

Basic Usage

You need to use plugins or presets to do anything. By default embed-js does nothing.

Let's assume that the HTML structure is as written below

<div id="element">
   <!--===== your string here =======-->
</div>

Creating an instance of embed.js

import EmbedJS from 'embed-js'
import url from 'embed-plugin-url'
import emoji from 'embed-plugin-emoji'

const x = new EmbedJS({
  input: document.getElementById('element'),
  plugins: [
    url(),
    emoji()
  ]
})

Next step is replacing the original text with the processed text.

//Render the result
x.render();

There may be cases where you just want the processed string to use it according to your need. You can get it by the following method. This can be used on the server side to get the string. Still if the plugin involves interactions, you will have to load it on the client side.

//Get the resulting string
x.text().then(({ result }) => {
  console.log(result); //The resulting string
})

If you wan't to destroy the instance. It will also replace the processed string with the original string.

//Destroy the instance
x.destroy()

Options

option default Description
plugins [] Accepts an array of plugins.
preset null Accepts a preset. Currently accpets only one preset. It can be combined with plugins.
inlineEmbed true If case you want to to embed contents at the end of texts, turn this to false.
replaceUrl false Useful when inlineEmbed is set to true. Replace text with the embed.
fetch window.fetch or window.unfetch If you are willing to use the library on both server and client side you need to pass an isomorphic fetch library like isomorphic-unfetch or isomorphic-fetch. This is only needed if you are using a plugin that has to make a HTTP request.

Development

  1. Fork the repo
  2. clone the repo then cd embed.js
  3. create a new branch
  4. Then npm install && yarn build:watch
  5. Create a PR

Note: This projects adheres to a Code of Conduct.

License

MIT ยฉ Ritesh Kumar

More Repositories

1

transform

A polyglot web converter.
TypeScript
7,242
star
2

moose

๐ŸฆŒ An application to stream, cast and download torrents.
TypeScript
825
star
3

starring

โญ๏ธ Automatically star the npm-packages that you are using on GitHub.
JavaScript
153
star
4

raaga

๐ŸŽน An online app to play and learn music on a keyboard.
TypeScript
129
star
5

rollup-plugin-filesize

A rollup plugin to show file size of the bundle in the cli
JavaScript
126
star
6

ng-embed

An AngularJS filter/directive for embedding emojis, media, maps, tweets, code and services
CSS
122
star
7

reference

An online tool to help you sketch human figures by creating different postures
JavaScript
81
star
8

react-typescript-component-starter-kit

๐ŸŽ‰ A started kit to write your React Components using Typescript, emotion, storybook, jest, docz and enzyme
TypeScript
77
star
9

react-fuzzy-search

๐Ÿ“œ A fuzzy search component written in React
JavaScript
74
star
10

socialShare.js

A jquery plugin to provide more control on social sharing buttons. [DEPRECATED]
JavaScript
72
star
11

ngEmoticons

An AngularJS directive for converting text emojis into image-based emoticons, also supporting automatic multimedia link embedding
CSS
63
star
12

photomosaic.js

A pure JavaScript plugin to create a mosaic of an image.
JavaScript
61
star
13

emoji-assistant

๐Ÿ˜ƒ A chrome extension to autosuggest emojis while writing on the web.
JavaScript
45
star
14

react-filters

โœจ A collection of customizable filters like radio, slider, autocomplete, range etc. written in React โœจ
JavaScript
35
star
15

text-dimensions

Performant Calculation of the width and height of a text string using canvas.
TypeScript
23
star
16

accountant

Invoice Generator, Tax Estimator and more for freelancers without the clutter.
TypeScript
13
star
17

react-component-boilerplate

A boilerplate to create React components using react-transform-hmr, Babel 6, SASS and React-storybook
JavaScript
12
star
18

javascript-plugin-boilerplate

A boilerplate to write plugins in pure JavaScript using ES2015. Includes mocha, chai, prettier, husky, Rollup and Eslint
JavaScript
9
star
19

react-slider

๐ŸŽš A slider component made in React
JavaScript
8
star
20

thesaurus

Find similar words even from the other languages.
JavaScript
7
star
21

ritz078.github.io

My personal website
JavaScript
6
star
22

matlab-mean-demo

A demo web-app using Matlab and MEAN stack
MATLAB
3
star
23

slide.js

A lightweight jQuery plugin to slide HTML elements of variable size and with Lazyload support
JavaScript
3
star
24

midi-instruments

A list of all the instruments according to midi spec.
TypeScript
3
star
25

react-native-component-boilerplate

A boilerplate to create React Native components
JavaScript
2
star
26

arduinode

A project using arduino and node to transfer data on the browser and then control the arduino.
JavaScript
2
star
27

nodebot-sample

A simple NodeBot sample
JavaScript
1
star
28

connect-e-dil

An Angular app to send roses (yellow or red) to anyone with a public shoutbox.
CSS
1
star