{"id":21691354,"url":"https://github.com/just214/react-bling","last_synced_at":"2026-04-17T02:33:53.695Z","repository":{"id":65482907,"uuid":"102988563","full_name":"just214/react-bling","owner":"just214","description":"A simple library that brings together react-animations, styled-components and react-waypoint to give you out-of-the-box animations for your React project.","archived":false,"fork":false,"pushed_at":"2018-02-12T04:03:14.000Z","size":320,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-19T04:17:47.151Z","etag":null,"topics":["animations","bling","javascript","react","react-animations","styled-components","waypoint"],"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/just214.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-09T22:25:24.000Z","updated_at":"2018-02-11T22:19:58.000Z","dependencies_parsed_at":"2023-01-25T11:15:21.629Z","dependency_job_id":null,"html_url":"https://github.com/just214/react-bling","commit_stats":null,"previous_names":["gojutin/react-bling"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/just214/react-bling","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Freact-bling","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Freact-bling/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Freact-bling/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Freact-bling/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/just214","download_url":"https://codeload.github.com/just214/react-bling/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/just214%2Freact-bling/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31912513,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-16T18:22:33.417Z","status":"online","status_checked_at":"2026-04-17T02:00:06.879Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["animations","bling","javascript","react","react-animations","styled-components","waypoint"],"created_at":"2024-11-25T17:37:35.651Z","updated_at":"2026-04-17T02:33:53.404Z","avatar_url":"https://github.com/just214.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-bling :gem:\n\n### `npm i react-bling`\n\n#### A simple library that brings together [react-animations](https://github.com/FormidableLabs/react-animations), [styled-components](https://www.styled-components.com/) and [react-waypoint](https://github.com/brigade/react-waypoint) to give you out-of-the-box animations for your React project.\n\n## Overview\n\nFirst, you install the `react-bling` library.\n\n`npm i react-bling` or `yarn install react-bling`\n\nNext, you import the default `Bling` component along with the animations that you want to use from the _react-bling_ library.\n\n`import Bling, { fadeIn, tada} from 'react-bling';`\n\nFinally, you wrap some React component(s) or element(s) in a `Bling` component and pass it animations and display information via `props`.\n\nAnimations can either applied one of two ways:\n\n1. On the initial render via the `animate` prop\n2. When the `Bling` component enters or exits the viewport via the `waypoint` prop.\n\nThis library exposes the animations and `merge` function provided by _react-animations_ along with the ability to chain these animations.\n\nI created the following website, which lets you sample all of the animations provided provided by _react-animations_: [https://rad.surge.sh](https://rad.surge.sh)\n\n## Basic Usage\n\nHere is the most basic example using the `animate` prop and `fadeIn` animation only:\n\n```js\nimport React from 'react';\nimport Bling, { fadeIn } from 'react-bling';\n\nconst App = () =\u003e (\n  \u003cBling animate={{ animation: fadeIn }}\u003e\n    \u003cp\u003eGo react-bling!\u003c/p\u003e\n  \u003c/Bling\u003e\n);\nexport default App;\n```\n\n## Props\n\n_react-bling_ accepts the following props: **_`el`, `render`, `animate`, `waypoint`_**\n\n### `el`\n\ntype: `string`\n\ndefault: `'div'`\n\nThe `el` prop is used to define the html element type used as the `Bling` wrapper component. You can use any element within the limitations of the language. For instance, you cannot use `el='p'` and also render a `p` tag as a child.\n\nExample:\n\n```js\n\u003cBling el=\"div\" ... /\u003e\n```\n\n### `render`\n\nThe `render` prop is used to render your wrapped component(s) or element(s) and accepts a function or component. You can also just wrap your component(s) or element(s) in an opening and closing `Bling` tag as shown in the example above.\n\n```js\n\u003cBling\n  animate={{animation: fadeIn}}\n  render={\u003cp\u003eGo react-bling!\u003c/p\u003e}\n/\u003e\n\n/* is the same as */\n\n\u003cBling\n  animate={{animation: fadeIn}}\n  render={() =\u003e \u003cp\u003eGo react-bling!\u003c/p\u003e}\n/\u003e\n\n/* is the same as */\n\n\u003cBling animate={{animation: fadeIn}}\u003e\n  \u003cp\u003eGo react-bling!\u003c/p\u003e\n\u003c/Bling\u003e\n```\n\n\u003e **_Note- The `animate` and `waypoint` props cannot be used together._**\n\n### `animate`\n\ntype: `object` or `array`\n\nThe `animate` prop is used to set animation(s) when the `Bling` wrapper component first renders. You can either provide a single animation object or multiple animation objects in an array. If an array is provided, the animations will be applied in the same order as the array.\n\nA single animation\n\n```js\nimport React from 'react';\nimport Bling, { fadeIn } from 'react-bling';\n\nconst App = () =\u003e (\n  \u003cBling\n    animate={{\n      animation: fadeIn,\n      duration: 3,\n      delay: 2,\n      iterate: 2,\n    }}\n    render={\u003cp\u003eGo react-bling!\u003c/p\u003e}\n  /\u003e\n);\n\nexport default App;\n```\n\nAn array of animations\n\n```js\nconst App = () =\u003e (\n  \u003cBling\n    animate={[\n      {\n        animation: fadeIn,\n        duration: 3,\n      },\n      {\n        animation: tada,\n        duration: 2,\n        iterate: 2,\n      },\n      {\n        animation: fadeOut,\n        duration: 4,\n      },\n    ]}\n    render={\u003cp\u003eGo react-bling!\u003c/p\u003e}\n  /\u003e\n);\n\nexport default App;\n```\n\n**Properties:**\n\n**`animation`**\n\ntype: `object` (required)\n\nYou can pass any animation that you import from _react-bling_. You can also use _react-animations_' `merge` function to make your own unique animations. `animation: merge(fadeIn, tada)`\n\n**`duration`**\n\ntype: `number` default: `2`\n\nThis property accepts a number representing the duration of the animation in seconds.\n\n**`delay`**\n\ntype: `number` default: `0`\n\nThis property accepts a number representing the delay of the animation in seconds.\n\n**`iterate`**\n\ntype: `number | string` default: `1`\n\nThis property accepts a number representing the number of times the animation should repeat. You can also pass the string `'infinite'` to repeat until the end of time.\n\n**`direction`**\n\ntype: `string` default: `'normal'`\n\nThis property accepts a number representing the animation-direction property.\n\naccepted values: `'normal' | 'reverse' | 'alternate' | 'alternate-reverse'`\n\n### `waypoint`\n\ntype: `object`\n\nThe `waypoint` prop is used to set animation(s) when the `Bling` wrapper component enters and leaves the viewport.\n\n**Properties:**\n\n**`position`**\n\ntype: `string`\noptions: `'above' | 'below'`\ndefault: `'above'`\n\nPlaces the `waypoint` above or below the wrapped component(s) or element(s).\n\n**`topOffset`**\n\ntype: `string || number`\nexamples: `100 | -100 | '100px' | '100%'`\ndefault: `'0px'`\n\n**`bottomOffset`**\n\ntype: `string || number`\nexamples: `100 | -100 | '100px' | '100%'`\ndefault: `'0px'`\n\nThe `topOffset` and `bottomOffset` properties control the top and bottom boundaries of the `waypoint` component and can be a little tricky to grasp at first. You can provide a number, which represents pixels. You can also represent pixels, percentages, etc. as strings. (eg. `'100%'`)\n\nIf you set `topOffset:'100px'`, this can be thought of like pushing the top boundary of the page down 100 pixels. This means that if you are scrolling up from the bottom, your `leave` animation would be triggered when the `waypoint` got to 100 pixels below the top of the screen. And if you are scrolling down from the very top, the `enter` animation will not be triggered until it reaches 100 pixels below the top of the screen.\n\nIf you set `bottomOffset:'100px'`, this can be thought of like pushing the bottom boundary of the page up 100 pixels. This means that if you are scrolling down from the top, your `leave` animation would be triggered when the `waypoint` got to 100 pixels above the bottom of the screen. And if you are scrolling up from the very bottom, the `enter` animation will not be triggered until it reaches 100 pixels above the bottom of the screen.\n\nHopefully that makes sense. If you are still blurry, you might find this explanation from `react-waypoint` useful:\n\n\u003e `topOffset` can either be a number, in which case its a distance from the\n\u003e top of the container in pixels, or a string value. Valid string values are\n\u003e of the form \"20px\", which is parsed as pixels, or \"20%\", which is parsed\n\u003e as a percentage of the height of the containing element.\n\u003e For instance, if you pass \"-20%\", and the containing element is 100px tall,\n\u003e then the waypoint will be triggered when it has been scrolled 20px beyond\n\u003e the top of the containing element.\n\n**`enter`**\n\ntype: `object || array` (required)\n\n**`leave`**\n\ntype: `object || array` (required)\n\nThe `enter` and `leave` properties are used to define the animations and animation details for when the `Bling` component enters and leaves the viewport. These properties have the same structure as the `animate` prop and are defined the same way, except as properties on the `waypoint` prop object.\n\n**`onEnter`**\n\ntype: `function`\n\n**`onLeave`**\n\ntype: `function`\n\nBoth the `onEnter` and `onLeave` properties accept a callback that you can provide for when the `Bling` component enters or leaves the viewport respectively. The `onEnter` and `onLeave` callbacks provide you with three values in the following order:\n\n`currentPosition` - Either 'inside' or 'outside' (the boundaries)\n\n`previousPosition`- Either 'inside' or 'outside' (the boundaries)\n\n`event`\n\n## Styling the `Bling` component\n\nThe `bling` component can be styled in a number of different ways:\n\nWith inline styles\n\n```js\n\u003cBling\n  style={{ border: '2px solid firebrick' }}\n  ...\n/\u003e\n```\n\nBy extending the component with _styled-components_\n\n```js\nconst StyledBling = styled(Bling)`\n  position: fixed;\n  width: 100%;\n  text-align: center;\n  z-index: 9.97999999890000033531123335706e29;\n`;\n```\n\nBy using the `.bling` class\n\n_Styles created with the `.bling` class will be applied to all `Bling` components rendered on the page. Maybe this is what you want. If not, consider the other styling options._\n\n```css\n.bling {\n  position: fixed;\n  width: 100%;\n  text-align: center;\n  z-index: 9.97999999890000033531123335706e29;\n}\n```\n\n## Example components\n\nUsing the `animate` prop\n\n```js\n\u003cBling\n  animate={[\n    {\n      animation: merge(tada, flip),\n      duration: 2,\n      iterate: 2,\n      direction: 'alternate',\n    },\n    {\n      animation: fadeOut,\n      duration: 3,\n      delay: 2,\n    },\n  ]}\n  render={\u003ch1\u003eHello\u003c/h1\u003e}\n/\u003e\n```\n\nUsing the `waypoint` prop\n\n```js\n\u003cBling\n  waypoint={{\n    onEnter: (currentPosition, previousPosition, event) =\u003e {\n      console.log(currentPosition, previousPosition, event);\n    },\n    onLeave: (currentPosition, previousPosition, event) =\u003e {\n      console.log(currentPosition, previousPosition, event);\n    },\n    position: 'above',\n    enter: {\n      animation: merge(tada, flip),\n      duration: 2,\n    },\n    leave: [\n      {\n        animation: tada,\n        duration: 3,\n      },\n      {\n        animation: fadeOut,\n        duration: 3,\n      },\n    ],\n  }}\n  render={\u003ch1\u003eHello\u003c/h1\u003e}\n/\u003e\n```\n\n## List of available animations\n\n`bouceOut`\n`bounce`\n`bounceIn`\n`bounceInDown`\n`bounceInLeft`\n`bounceInRight`\n`bounceInUp`\n`bounceOutDown`\n`bounceOutLeft`\n`bounceOutRight`\n`bounceOutUp`\n`fadeIn`\n`fadeInDown`\n`fadeInDownBig`\n`fadeInLeft`\n`fadeInLeftBig`\n`fadeInRight`\n`fadeInRightBig`\n`fadeInUp`\n`fadeInUpBig`\n`fadeOut`\n`fadeOutDown`\n`fadeOutDownBig`\n`fadeOutLeft`\n`fadeOutLeftBig`\n`fadeOutRight`\n`fadeOutRightBig`\n`fadeOutUp`\n`fadeOutUpBig`\n`flash`\n`flip`\n`flipInX`\n`flipInY`\n`flipOutX`\n`flipOutY`\n`headShake`\n`hinge`\n`jello`\n`lightSpeedIn`\n`lightSpeedOut`\n`pulse`\n`rollIn`\n`rollOut`\n`rotateIn`\n`rotateInDownLeft`\n`rotateInDownRight`\n`rotateInUpLeft`\n`rotateInUpRight`\n`rotateOut`\n`rotateOutDownLeft`\n`rotateOutDownRight`\n`rotateOutUpLeft`\n`rotateOutUpRight`\n`rubberBand`\n`shake`\n`slideInDown`\n`slideInLeft`\n`slideInRight`\n`slideInUp`\n`slideOutDown`\n`slideOutLeft`\n`slideOutRight`\n`slideOutUp`\n`swing`\n`tada`\n`wobble`\n`zoomIn`\n`zoomInDown`\n`zoomInLeft`\n`zoomInRight`\n`zoomInUp`\n`zoomOut`\n`zoomOutDown`\n`zoomOutLeft`\n`zoomOutRight`\n`zoomOutUp`\n\n## More about `merge`\n\nFrom the _react-animations_ README:\n\n\u003e react-animations also exports a `merge` function that takes two animations and returns a new animation that combines the transforms from both. This is experimental and wont work (well) with animations that have conflicting transforms, such as `fadeIn` and `fadeOut`. The merged animation can be used just like any of the imported animations.\n\n## Design Decisions\n\nWhile creating this library, I went back and forth between two approaches to handling arrays of animations:\n\nThe current (and more verbose) approach:\n\n```js\n\u003cBling\n  animate={[\n    {\n      animation: fadeIn,\n      duration: 3,\n    },\n    {\n      animation: tada,\n      duration: 2,\n      iterate: 2,\n    },\n    {\n      animation: fadeOut,\n      duration: 4,\n    },\n  ]}\n  render={\u003cp\u003eGo react-bling!\u003c/p\u003e}\n/\u003e\n```\n\nand the more succinct approach:\n\n```js\n\u003cBling\n  animate={{\n    animation: [fadeIn, tada, fadeOut],\n    duration: [3, 2, 4],\n    delay: [0, 0, 1],\n    iterate: [1, 2, 1],\n  }}\n  render={\u003cp\u003eGo react-bling!\u003c/p\u003e}\n/\u003e\n```\n\nUltimately, I decided to go with the more verbose approach as I found it easier to read, understand and work with. Imagine you pass an array of three animations but an array of only two durations. Should the last animation use the previous duration or the default duration value? I find it much easier to explicitly define the properties for each animation with the assumption that the defaults are applied if no value is provided.\n\nAlso, if you decide to change the order of animations later, it's much easier when they are grouped together as objects as opposed to each value being a part of a seperate array.\n\nMade with :green_heart: by a vegan\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust214%2Freact-bling","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjust214%2Freact-bling","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjust214%2Freact-bling/lists"}