Fully customizable Facebook reactions like control

Overview

Reactions

Supported Platforms Version Swift Package Manager Carthage compatible Build status Code coverage status Codebeat badge

Reactions is a fully customizable control to give people more ways to share their reaction in a quick and easy way.

Reactions

RequirementsUsageInstallationContributionContactLicense

Requirements

  • iOS 8.0+
  • Xcode 9.0+
  • Swift 4.2+

Usage

Reaction

Reaction

A Reaction object is a model defined with these properties:

  • id: a unique identifier.
  • title: the title displayed either in a selector or a button.
  • color: the color used to display the button title.
  • icon: the reaction icon.
  • alternativeIcon: the optional alternative icon used with the reaction button.

The library already packages the standard Facebook reactions: like, love, haha, wow, sad and angry. And of course you can create your owns:

let myReaction = Reaction(id: "id", title: "title", color: .red, icon: UIImage(named: "name")!)

ReactionSelector

ReactionSelector

The ReactionSelector control allows people to select a reaction amongst a list:

let select       = ReactionSelector()
select.reactions = Reaction.facebook.all

// React to reaction change
select.addTarget(self, action: #selector(reactionDidChanged), for: .valueChanged)

func reactionDidChanged(_ sender: AnyObject) {
  print(select.selectedReaction)
}

// Conforming to the ReactionFeedbackDelegate
select.feedbackDelegate = self

func reactionFeedbackDidChanged(_ feedback: ReactionFeedback?) {
  // .slideFingerAcross, .releaseToCancel, .tapToSelectAReaction
}

The component can be used alone (like above) or in conjunction with the ReactionButton (discussed later). You can of course customize the component using a ReactionSelectorConfig object:

select.config = ReactionSelectorConfig {
  $0.spacing        = 6
  $0.iconSize       = 40
  $0.stickyReaction = false
}

ReactionButton

ReactionButton

A ReactionButton provides a simple way to toggle a reaction (e.g. like/unlike). A ReactionSelector can also be attached in order to display it when a long press is performed:

let button      = ReactionButton()
button.reaction = Reaction.facebook.like

// To attach a selector
button.reactionSelector = ReactionSelector()

You can configure the component using a ReactionButtonConfig object:

button.config         = ReactionButtonConfig() {
  $0.iconMarging      = 8
  $0.spacing          = 4
  $0.font             = UIFont(name: "HelveticaNeue", size: 14)
  $0.neutralTintColor = UIColor(red: 0.47, green: 0.47, blue: 0.47, alpha: 1)
  $0.alignment        = .left
}

ReactionSummary

ReactionSummary

The ReactionSummary is a control which display a given reaction list as a set of unique icons superimposed. You can also link it to a text description.

let summary       = ReactionSummary()
summary.reactions = Reaction.facebook.all
summary.text      = "You, Chris Lattner, and 16 others"

// As is a control you can also react to the .touchUpInside event
select.addTarget(self, action: #selector(summaryDidTouched), for: .touchUpInside)

ReactionSummary Non Aggregated

You can also have the details for each reaction. For that you'll need to uncombined them by setting the isAggregated config property to false.

summary.config = ReactionSummaryConfig {
  $0.isAggregated = false
}

Like the other components you can setting it using a ReactionSummaryConfig object:

summary.config = ReactionSummaryConfig {
  $0.spacing      = 8
  $0.iconMarging  = 2
  $0.font         = UIFont(name: "HelveticaNeue", size: 12)
  $0.textColor    = UIColor(red: 0.47, green: 0.47, blue: 0.47, alpha: 1)
  $0.alignment    = .left
  $0.isAggregated = true
}

Installation

CocoaPods

Install CocoaPods if not already available:

$ [sudo] gem install cocoapods
$ pod setup

Go to the directory of your Xcode project, and Create and Edit your Podfile and add Reactions:

$ cd /path/to/MyProject
$ touch Podfile
$ edit Podfile
source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'

use_frameworks!
pod 'Reactions', '~> 3.0.0'

Install into your project:

$ pod install

Open your project in Xcode from the .xcworkspace file (not the usual project file):

$ open MyProject.xcworkspace

You can now import Reactions framework into your files.

Carthage

Carthage is a decentralized dependency manager that automates the process of adding frameworks to your Cocoa application.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate Reactions into your Xcode project using Carthage, specify it in your Cartfile file:

github "yannickl/Reactions" >= 3.0.0

Swift Package Manager

You can use The Swift Package Manager to install Reactions by adding the proper description to your Package.swift file:

import PackageDescription

let package = Package(
    name: "YOUR_PROJECT_NAME",
    targets: [],
    dependencies: [
        .Package(url: "https://github.com/yannickl/Reactions.git", versions: "3.0.0" ..< Version.max)
    ]
)

Note that the Swift Package Manager is still in early design and development, for more information checkout its GitHub Page.

Manually

Download the project and copy the Sources and Resources folders into your project to use it in.

Contribution

Contributions are welcomed and encouraged .

Contact

Yannick Loriot

License (MIT)

Copyright (c) 2016-present - Yannick Loriot

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Comments
  • I got some issue when I update your framework.

    I got some issue when I update your framework.

    I found that below is code in your old version, and in the new version it is changed.

    import UIKit
    
    /// Default implementation of the facebook reactions.
    extension Reaction {
      /// Struct which defines the standard facebook reactions.
      public struct facebook {
    
      public static var count:Int = 0
        /// The facebook's "like" reaction.
        
       
        public static var like: Reaction {
            return reactionWithId("1",name: "like",count:count)
        }
    
        /// The facebook's "love" reaction.
        public static var handpressed: Reaction {
          return reactionWithId("8",name: "handpressed",count:count)
        }
    
        /// The facebook's "haha" reaction.
        public static var openhand: Reaction {
          return reactionWithId("3",name: "openhand",count:count)
        }
    
        /// The facebook's "wow" reaction.
        public static var okhand: Reaction {
          return reactionWithId("4",name: "okhand",count:count)
        }
    
        /// The facebook's "sad" reaction.
        public static var smilingface: Reaction {
            return reactionWithId("2",name: "smiling-face",count:count)
        }
    
        /// The facebook's "sad" reaction.
        public static var surprised: Reaction {
            return reactionWithId("6",name: "surprised",count:count)
        }
    
        /// The facebook's "sad" reaction.
        public static var grinningface: Reaction {
            return reactionWithId("5",name: "grinning-face",count:count)
        }
    
        /// The facebook's "sad" reaction.
        public static var crying: Reaction {
          return reactionWithId("9",name: "crying",count:count)
        }
    
        /// The facebook's "angry" reaction.
        public static var pouting: Reaction {
          return reactionWithId("7",name: "pouting",count:count)
        }
    
        /// The facebook's "angry" reaction.
        public static var usaflag: Reaction {
            return reactionWithId("10",name: "usa-flag",count:count)
        }
    
        /// The list of standard facebook reactions in this order: `.like`, `.love`, `.haha`, `.wow`, `.sad`, `.angry`.
    //    public static let all: [Reaction] = [facebook.like, facebook.love, facebook.haha, facebook.wow,facebook.smilingface,facebook.surprised,facebook.angry,facebook.grinningface,facebook.sad,facebook.usaflag]
    
        public static let all: [Reaction] = [facebook.like,facebook.smilingface,facebook.openhand,facebook.okhand,facebook.grinningface,facebook.surprised,facebook.pouting,facebook.handpressed,facebook.crying,facebook.usaflag]
        
        
        // MARK: - Convenience Methods
    
        private static func reactionWithId(_ id: String,name:String) -> Reaction {
          var color: UIColor            = .black
          var alternativeIcon: UIImage? = nil
    
          switch name {
          case "like":
            color = UIColor(red: 1/255.0, green:158/255.0, blue: 92/255.0, alpha: 1)
            alternativeIcon = imageWithName("like-template").withRenderingMode(.alwaysTemplate)
          case "love":
            color = UIColor(red: 0.93, green: 0.23, blue: 0.33, alpha: 1)
          case "angry":
            color = UIColor(red: 0.96, green: 0.37, blue: 0.34, alpha: 1)
          default:
            color = UIColor(red: 0.99, green: 0.84, blue: 0.38, alpha: 1)
          }
    
          return Reaction(id: id, title: name.localized(from: "FacebookReactionLocalizable"), color: color, icon: imageWithName(name), alternativeIcon: alternativeIcon)
        }
        private static func reactionWithId(_ id: String,name:String,count:Int) -> Reaction {
            var color: UIColor            = .black
            var alternativeIcon: UIImage? = nil
    
            switch name {
            case "like":
                color = UIColor(red: 1/255.0, green:158/255.0, blue: 92/255.0, alpha: 1)
                alternativeIcon = imageWithName("like-template").withRenderingMode(.alwaysTemplate)
            case "love":
                color = UIColor(red: 0.93, green: 0.23, blue: 0.33, alpha: 1)
            case "angry":
                color = UIColor(red: 0.96, green: 0.37, blue: 0.34, alpha: 1)
            default:
                color = UIColor(red: 0.99, green: 0.84, blue: 0.38, alpha: 1)
            }
    
            return Reaction(id: id, title: name.localized(from: "FacebookReactionLocalizable"), color: color, icon: imageWithName(name), alternativeIcon: alternativeIcon,count:count)
        }
    
        private static func imageWithName(_ name: String) -> UIImage {
          return UIImage(named: name, in: .reactionsBundle(), compatibleWith: nil)!
        }
      }
    }
    

    But when I move to your old tag file version like 1.0.0 and 2.0.0. All have the same code in this file. It looks like you haven't maintained all the version. That's why you have same code in all the version. Correct me if I'm wrong.

    opened by Rjmaurya13 3
  • feedback for feedback delegate

    feedback for feedback delegate

    Could you explain how or what you can do with the feedback delegate because currently, it's just sitting in the swift file empty and the description doesn't really explain anything?

    opened by MorekeysOfficial 2
  • Reactions receives no input whatsoever.

    Reactions receives no input whatsoever.

    I've added Reactions to a UIView and the animations do not change when I mouse hover or click, leading me to believe that it's receiving no input whatsoever. What could cause this?

    var select = ReactionSelector() select.reactions = Reaction.facebook.all containerView.addSubview(select)

    opened by Jorghi12 1
  • disable long press facebookReactionButton

    disable long press facebookReactionButton

    Great job, is there a way to disable the long press animation of the facebookReactionButton, I only want to enable the like and dislike, no the ReactionSummary when I pressed for a long time.

    opened by dromerobarria 1
  • Conflicting UILongPressGestureRecognizer with Reactions Button.

    Conflicting UILongPressGestureRecognizer with Reactions Button.

    I have a Reactions Button that's added to a view controller's view. But, when the view has a UILongPressGestureRecognizer, also in the view, it seems to override the Reactions' selector methods where it shows the reactions. Is there a work around for this?

    opened by HackShitUp 1
  • Deployment Target Version for Cocoa Touch framework is 10.0, should be 8.0

    Deployment Target Version for Cocoa Touch framework is 10.0, should be 8.0

    I was trying to use the framework through Carthage in my project which supports iOS 8.0 and got an error as the minimum deployment target version was set to 10.0

    I've updated the project and it works fine now. You only need to lower the number for the Cocoa Framework target.

    opened by pedromancheno 1
  • How to set default Reaction Button ?

    How to set default Reaction Button ?

    My code:

    private let button = ReactionButton()
    button.reaction = Reaction.facebook.sad
    

    But by default, it is still like. And there's one more problem. I want to set the time when ReactionSelector displays to 500ms, what should I do?

    Help me, Please

    opened by baronha 0
  • Change Reaction Icons?

    Change Reaction Icons?

    Is there a way to change the reaction icons? In other words, how do I change "Like", "Love", "Haha", "Wow", or "Angry"?

    opened by HackShitUp 0
  • Button does not work inside StackView

    Button does not work inside StackView

    I placed a ReactionButton (programmatically and storyboard), and it has errors when placing button under a stackView; Screen Shot 2020-11-02 at 1 04 54 AM Only the "Like" icon above is displayed, and the text is missing. it is also unresponsive to click events. Please help!

    opened by Nestor231 0
  • Overlay views are not getting removed from window

    Overlay views are not getting removed from window

    For each and every ReactionButton there will be an "overlay" view and that overlay view is attached to UIApplication window whenever user started to react.

    But there is no where you are removing the "overlay" view from window, so because of this if user reacting on 100 cells will lead to create 100 overlay views and it wont get removed from superview even after user came out from that controller.

    Steps To Reproduce:

    1)Run the example Project
    2)Press "View inside Tableview cells"
    3)Do reactions in cells
    4)Come out from the screen
    5)Run the view inspector from your xcode,
    

    You will get similar to this,

    Screenshot 2020-02-27 at 4 59 58 PM

    I reacted four times, so four overlays + reaction selector got created.

    Solution: We can remove the "overlay" view whenever ReactionButton removed from it's superview

    opened by rajAppmetry 1
  • New parameters for summary (iconBorderColor, iconBorderWidth, isIconRounded)

    New parameters for summary (iconBorderColor, iconBorderWidth, isIconRounded)

    Hello,

    This is a little workaround for https://github.com/yannickl/Reactions/issues/4

    And it will allow the user to customize a little more the icon for the summary component

    Thanks

    opened by letrongh 0
  • How do I show single reaction count in the reaction summary?

    How do I show single reaction count in the reaction summary?

    I can't seem to be able to add the count of each reaction type in the reaction summary. For example, "1" in here:

    https://cloud.githubusercontent.com/assets/798235/19440513/792e0b6c-9482-11e6-8410-c5522ca93fed.png

    opened by csr 0
Owner
Yannick Loriot
iOS developer and nodejs addict. Open-source lover and technology enthusiast.
Yannick Loriot
A beautiful radar view to show nearby items (users, restaurants, ...) with ripple animation, fully customizable

HGRippleRadarView Example To run the example project, clone the repo, and run pod install from the Example directory first. This project is inspired b

Hamza Ghazouani 352 Dec 4, 2022
🔍 Awesome fully customize search view like Pinterest written in Swift 5.0 + Realm support!

YNSearch + Realm Support Updates See CHANGELOG for details Intoduction ?? Awesome search view, written in Swift 5.0, appears search view like Pinteres

Kyle Yi 1.2k Dec 17, 2022
Simple PhotoBrowser/Viewer inspired by facebook, twitter photo browsers written by swift

SKPhotoBrowser Simple PhotoBrowser/Viewer inspired by facebook, twitter photo browsers written by swift features Display one or more images by providi

keishi suzuki 2.4k Jan 6, 2023
FacebookMe is a Swift App Mimics the personal profile tab of Facebook.

FacebookMe FacebookMe is a Swift App Mimics the personal profile tab of Facebook. It demos one simple way to implement a UITableView with mutiple sect

Kushal Shingote 3 Feb 20, 2022
Newly is a drop in solution to add Twitter/Facebook/Linkedin style, new updates/tweets/posts available button

Newly is a drop in solution to add Twitter/Facebook/Linkedin style, new updates/tweets/posts available button. It can be used to notify user about new content availability and can other actions can be triggers using its delegate method.

Dhiraj Rajendra Jadhao 197 Sep 22, 2022
RangeSeedSlider provides a customizable range slider like a UISlider.

RangeSeekSlider Overview RangeSeekSlider provides a customizable range slider like a UISlider. This library is based on TomThorpe/TTRangeSlider (Objec

WorldDownTown 644 Dec 12, 2022
List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model and doesn't depend on UI framework

SwiftListTreeDataSource List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model, so can

Dzmitry Antonenka 26 Nov 26, 2022
🚀 Elegant Pager View fully written in pure SwiftUI.

PagerTabStripView Made with ❤️ by Xmartlabs team. XLPagerTabStrip for SwiftUI! Introduction PagerTabStripView is the first pager view built in pure Sw

xmartlabs 482 Jan 9, 2023
TSnackBarView is a simple and flexible UI component fully written in Swift

TSnackBarView is a simple and flexible UI component fully written in Swift. TSnackBarView helps you to show snackbar easily with 3 styles: normal, successful and error

Nguyen Duc Thinh 3 Aug 22, 2022
TDetailBoxView is a simple and flexible UI component fully written in Swift

TDetailBoxView is a simple and flexible UI component fully written in Swift. TDetailBoxView is developed to help users quickly display the detail screen without having to develop from scratch.

Nguyen Duc Thinh 2 Aug 18, 2022
TSwitchLabel is a simple and flexible UI component fully written in Swift.

TSwitchLabel is a simple and flexible UI component fully written in Swift. TSwitchLabel is developed for you to easily use when you need to design a UI with Label and Switch in the fastest way without having to spend time on develop from scratch.

Nguyen Duc Thinh 2 Aug 18, 2022
Whole, half or floating point ratings control written in Swift

FloatRatingView A simple rating view for iOS written in Swift! Supports whole, half or floating point values. I couldn't find anything that easily set

Glen Yi 546 Dec 8, 2022
A custom reusable circular / progress slider control for iOS application.

HGCircularSlider Example To run the example project, clone the repo, and run pod install from the Example directory first. You also may like HGPlaceho

Hamza Ghazouani 2.4k Jan 6, 2023
iOS 11 Control Center Slider

SectionedSlider Control Center Slider Requirements Installation Usage License Requirements iOS 8.0+ Swift 3.0+ Xcode 8.0+ Installation CocoaPods Cocoa

Leonardo Cardoso 361 Dec 3, 2022
UIPheonix is a super easy, flexible, dynamic and highly scalable UI framework + concept for building reusable component/control-driven apps for macOS, iOS and tvOS

UIPheonix is a super easy, flexible, dynamic and highly scalable UI framework + concept for building reusable component/control-driven apps for macOS, iOS and tvOS

Mohsan Khan 29 Sep 9, 2022
A page control similar to that used in Instagram

ISPageControl ISPageControl has a page control similar to that used in the Instagram Contents Requirements Installation Usage Communication Credits Li

Interactive 291 Dec 5, 2022
A simple, customizable view for efficiently collecting country information in iOS apps.

CountryPickerView CountryPickerView is a simple, customizable view for selecting countries in iOS apps. You can clone/download the repository and run

Kizito Nwose 459 Dec 27, 2022
📊 A customizable gradient progress bar (UIProgressView).

GradientProgressBar A customizable gradient progress bar (UIProgressView). Inspired by iOS 7 Progress Bar from Codepen. Example To run the example pro

Felix M. 490 Dec 16, 2022
A customizable color picker for iOS in Swift

IGColorPicker is a fantastic color picker ?? written in Swift. Table of Contents Documentation Colors Style Other features Installation Example Gettin

iGenius 272 Dec 17, 2022