{"id":22374325,"url":"https://github.com/yatharthx/react-teller","last_synced_at":"2026-05-11T06:24:50.222Z","repository":{"id":57346243,"uuid":"87320189","full_name":"yatharthx/react-teller","owner":"yatharthx","description":"ReactJS notifications for the ES6 age. 🚀","archived":false,"fork":false,"pushed_at":"2017-05-01T17:23:49.000Z","size":405,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-03T01:48:27.075Z","etag":null,"topics":["component-driven","es2015","notification-service","notifications","reactjs","tagged-template"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yatharthx.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-05T14:37:22.000Z","updated_at":"2017-04-29T13:13:54.000Z","dependencies_parsed_at":"2022-09-19T12:11:04.413Z","dependency_job_id":null,"html_url":"https://github.com/yatharthx/react-teller","commit_stats":null,"previous_names":["yatharthk/react-teller"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yatharthx%2Freact-teller","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yatharthx%2Freact-teller/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yatharthx%2Freact-teller/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yatharthx%2Freact-teller/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yatharthx","download_url":"https://codeload.github.com/yatharthx/react-teller/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245701808,"owners_count":20658487,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component-driven","es2015","notification-service","notifications","reactjs","tagged-template"],"created_at":"2024-12-04T21:16:47.904Z","updated_at":"2026-05-11T06:24:50.185Z","avatar_url":"https://github.com/yatharthx.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React-Teller\n\n[![Build Status](https://travis-ci.org/yatharthk/react-teller.svg?branch=master)](https://travis-ci.org/yatharthk/react-teller) [![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\u003e ReactJS notifications for the ES6 age. :rocket:\n\n```\nnpm install --save react-teller\n```\n\nHarnessing the power of ES6 [tagged template literals](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals), `React-Teller` makes it extremely intuitive and fun to write notification components.\n\n## Usage\n\nFirstly, you define your notification using ES6 template strings:\n\n```javascript\nimport React from 'react'\nimport Notification from 'react-teller'\nimport 'react-teller/dist/react-teller.css'\n\nconst MyNotification = Notification`\n  Hello, I'm a notification!\n`\n```\n\nAnd then you call your notification whenever needed:\n\n```javascript\nMyNotification()\n```\n\nInteresting, right? Let's go through some more features of `React-Teller` and how you can configure it.\n\n### Title\n\nAn easy way to provide the `title` for your notification is through text line preceded with `#`.\n\n```javascript\nconst MyNotification = Notification`\n  # Notification Title\n  Hello, I'm a notification\n`\n```\n\n\u003e NOTE: Only first line (preceded with `#`) will be taken into account as title. Rest goes into notification text content. Also, title should be placed preceding the content text.\n\n### Configuration\n\n`React-Teller` provides a number of configuration options:\n\n| Option | Value(s) | Default |\n|--------|----------|---------|\n| `type` | `info` `success` `warning` `error`| `info` |\n| `position` | `top-right` `top-left` `bottom-right` `bottom-left` | `top-right` |\n| `animation` | `fade` `slide` | `slide` |\n| `duration` | `(in ms)` | `5000` |\n\n\u003e NOTE: Currently, the animation supports `slide-out` effect only. More effects will be added in upcoming releases.\n\nAdding configuration to your notification has been made dead simple. No additional JSON objects anymore. Just add configuration props to template at the very beginning following these rules:\n\n- Starts with `--`\n- One property each line\n\nFor instance,\n\n```javascript\nconst MyNotification = Notification`\n  -- position: top-left\n  -- type: success\n  # Notification Title\n  Hello, I'm a notification\n`\n```\n\n### Invocation/Rendering\n\nAs you must have noticed, `React-Notification` doesn't return a react component that you can render inside your other components. It's returns a function that takes care of rendering by itself.\n\n### Calling notifications with data\n\nUp till now you've seen templates with plain text. Now that's not very useful for all the cases. Let's say you have to shoot out a notification welcoming your newly on-boarded user addressing his name. You won't keep writing notifications every time with a new name, right? Write reusable notification:\n\n```javascript\n// declare reusable notification\nconst WelcomeUser = Notification`\n  # Hey, ${0}!\n  XYZ welcomes you onboard. Get started with writing about yourself!\n`\n\nWelcomeUser('John')\n```\n\nYou can also use named variables and then pass object (instead of a `string`) with variable as `key`:\n\n```javascript\nconst WelcomeUser = Notification`\n  # Hey, ${'name'}!\n  XYZ welcomes you onboard. Get started with writing about yourself!\n`\n\nWelcomeUser({name: 'John'})\n```\n\n### Overriding default configuration\n\nProbably, there'll be times when you'd like to change the default configuration you've put up at the time of defining your notification. Well, it's as simple as passing first argument (while invoking your notification) as a JSON object with overriding properties and then your data values.\n\nFor example you declare your `WelcomeUser` notification of `type: info` :\n\n```javascript\nconst WelcomeUser = Notification`\n  -- type: info\n  # Hey, ${'name'}!\n  XYZ welcomes you onboard. Get started with writing about yourself!\n`\n```\n\nAt the time of invocation, maybe you need to render it as `type: success`. It's as simple as:\n\n```javascript\nWelcomeUser(\n  {type: 'success'}, // overriding template config, very first argument\n  {name: 'John'},    // Your usual template data\n)\n```\n\n### Mouse Events\n\n`React-Teller` currently ships with an `onClick` event that you pass with or in place of `overriding configuration` at the time of invoking the notification function.\n\n```javascript\nconst handleClick = () =\u003e { /* do something */ }\n\nWelcomeUser({onClick: handleClick, ...overrides}, {name: 'John'})\n```\n\n### Animation\n\n`React Teller` ships with two effects - `Slide in-Slide out` and `Fade in-Fade out`. You can refer to the configuration table for valid `animation` property values.\n\n## todo\n\n- Better test coverage\n- More animation/effects\n- Supporting React components\n- et al\n\n## License\n\nLicensed under the MIT License, Copyright © Yatharth Khatri.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyatharthx%2Freact-teller","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyatharthx%2Freact-teller","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyatharthx%2Freact-teller/lists"}