Git Product home page Git Product logo

lojals / reactionbutton Goto Github PK

View Code? Open in Web Editor NEW
311.0 10.0 42.0 2.21 MB

Since Facebook introduced reactions in 2016, it became a standard in several applications as a way for users to interact with content. ReactionButton is a control that allows developers to add this functionality to their apps in an easy way.

License: MIT License

Swift 95.41% Ruby 4.59%
reactions swift darkmode selector control uikit

reactionbutton's Introduction


Since Facebook introduced reactions in 2016, it became a standard in several applications as a way for users to interact with content. ReactionButton is a control that allows developers to add this functionality to their apps in an easy way.

Features

  • Support of Dark Mode
  • Customizable layout using ReactionButtonDelegateLayout
  • Extensible DataSource for the control
  • Layout support for scrolling interfaces (UICollectionView/UITableView)
  • Codable initializer for usage on storyboards
  • Events

Requirements

  • iOS 13.0+
  • Swift 5.0+

Installation

Usage

1. Basic Instance

There are multiple ways to instantiate a ReactionButton, using a frame, storyboards, or an empty convenience initializer.

Example Code

let buttonSample = ReactionButton(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
buttonSample.dataSource = self
view.addSubview(buttonSample)

Basic usage

Images from Trump reactionpacks style.

2. Delegate

The ReactionButton has a delegate to communicate events of option selection, option focus, and cancel of actions. To use it, set the ReactionButtonDelegate conform as a delegate.

let buttonSample = ReactionButton(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
buttonSample.delegate = self
view.addSubview(buttonSample)

Delegate example

Images from Trump reactionpacks style.

3. Custom layout instance

ReactionButton allows customization of the layout with the help of ReactionButtonDelegateLayout. To use it, please conform to that protocol and set it as delegate (Same pattern as UICollectionView).

func ReactionSelectorConfiguration(_ selector: ReactionButton) -> ReactionButton.Config {
  ReactionButton.Config(spacing: 2,
                        size: 30,
                        minSize: 34,
                        maxSize: 45,
                        spaceBetweenComponents: 30)
}

You can custom your selector with the following variables, used in the

New

sizes

Author

Jorge Ovalle, [email protected]

reactionbutton's People

Contributors

jakezeal avatar lojals avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

reactionbutton's Issues

selectedOption never get called

Hi,
I am trying your example however, I see that the selectedOption here never gets called so I don't get chance to check if user select something. Overtime, its showing "User cancelled".

Not working on iOS 15

Tested It on a device running IOS 15 and It does nothing but It works fine with lower versions.

iOS 7

Can you please change JOTextField.podspec

s.platform = :ios, '7.0'

It seems to work perfectly on iOS 7 but I can't use it via cocoapods until that line is changed.

Need tablecell index for reaction update

Hi there,
I need to update reaction selection back to tableview cell. But here, I'm unable to find index which is responsible for reaction button action.

Much appreciated for your help.
Thanks

objective-C version

is there an objective-c version?

I mean a real version written in objc-c, not to include using bridge

Inconsistent with familiar user experience

Of course this is a familiar user experience on Facebook:
While the difference is small - it is important
in this control user has to:

  • click once to activate view
  • click a second time to pick emoji
    While on FB user (long presses) once and immediately the toolbar is activated and shown
    I believe as an alternative implementation a long press event is more familiar.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.