Add TikTok Login Button

Author: michaeljscript

README.md

@@ -7,7 +7,7 @@ A simple package to display social login buttons using React.
 Buttons do not provide any social logic.
 They are only visual components listening to some events triggered by the user.
 
-![Social login buttons](https://raw.githubusercontent.com/MichalSzorad/react-social-login-buttons/develop/examples/simple/screenshot2.png)
+![Social login buttons](https://raw.githubusercontent.com/MichalSzorad/react-social-login-buttons/develop/examples/simple/screenshot3.png)
 
 ## Install
 
@@ -153,6 +153,12 @@ We currently support just a few login buttons. Others will be implemented later.
 <ZaloLoginButton onClick={() => alert('Hello')} />
 ```
 
+### TikTokLoginButton
+
+```jsx
+<TikTokLoginButton onClick={() => alert('Hello')} />
+```
+
 ## Create your own button
 
 You can create your own button.

examples/simple/screenshot3.png

@@ -0,0 +1,32 @@
+import React from 'react';
+import T from 'prop-types';
+import createButton from './create-button';
+import createSvgIcon from './createSvgIcon';
+
+const config = {
+ activeStyle: { background: '#333333' },
+ icon: createSvgIcon(Icon),
+ style: { background: '#000000', color: '#FFFFFF' },
+ text: 'Log in with TikTok',
+};
+
+const TikTokLoginButton = createButton(config);
+
+export default TikTokLoginButton;
+
+function Icon ({ width, height, color }) {
+ return (<svg
+ xmlns="http://www.w3.org/2000/svg"
+ width={width}
+ height={height}
+ fill={color}
+ viewBox="0 0 512 512"
+ >
+ <path d="M412.19 118.66a109.27 109.27 0 01-9.45-5.5 132.87 132.87 0 01-24.27-20.62c-18.1-20.71-24.86-41.72-27.35-56.43h.1C349.14 23.9 350 16 350.13 16h-82.44v318.78c0 4.28 0 8.51-.18 12.69 0 .52-.05 1-.08 1.56 0 .23 0 .47-.05.71v.18a70 70 0 01-35.22 55.56 68.8 68.8 0 01-34.11 9c-38.41 0-69.54-31.32-69.54-70s31.13-70 69.54-70a68.9 68.9 0 0121.41 3.39l.1-83.94a153.14 153.14 0 00-118 34.52 161.79 161.79 0 00-35.3 43.53c-3.48 6-16.61 30.11-18.2 69.24-1 22.21 5.67 45.22 8.85 54.73v.2c2 5.6 9.75 24.71 22.38 40.82A167.53 167.53 0 00115 470.66v-.2l.2.2c39.91 27.12 84.16 25.34 84.16 25.34 7.66-.31 33.32 0 62.46-13.81 32.32-15.31 50.72-38.12 50.72-38.12a158.46 158.46 0 0027.64-45.93c7.46-19.61 9.95-43.13 9.95-52.53V176.49c1 .6 14.32 9.41 14.32 9.41s19.19 12.3 49.13 20.31c21.48 5.7 50.42 6.9 50.42 6.9v-81.84c-10.14 1.1-30.73-2.1-51.81-12.61z" />
+ </svg>);
+}
+
+Icon.propTypes = {
+ width: T.oneOfType([T.number, T.string]),
+ height: T.oneOfType([T.number, T.string]),
+};

src/buttons/TikTokLoginButton.js

@@ -16,3 +16,4 @@ export { default as YahooLoginButton } from './YahooLoginButton';
 export { default as createButton } from './create-button';
 export { default as createSvgIcon } from './createSvgIcon';
 export { default as ZaloLoginButton } from './ZaloLoginButton';
+export { default as TikTokLoginButton } from './TikTokLoginButton';

src/buttons/index.js

@@ -61,6 +61,7 @@ declare class SlackLoginButton extends SpecificSocialLoginButton { }
 declare class OktaLoginButton extends SpecificSocialLoginButton { }
 declare class YahooLoginButton extends SpecificSocialLoginButton { }
 declare class ZaloLoginButton extends SpecificSocialLoginButton { }
+declare class TikTokLoginButton extends SpecificSocialLoginButton { }
 
 
 declare const createButton: (props: SpecificSocialLoginButtonProps) => React.ComponentClass<SpecificSocialLoginButtonProps>;
@@ -83,6 +84,7 @@ export {
  OktaLoginButton,
  YahooLoginButton,
  ZaloLoginButton,
+ TikTokLoginButton,
  createButton,
  createSvgIcon,
 }

src/types.d.ts

@@ -54,7 +54,7 @@ storiesOf("Social login buttons", module)
 
 
 function AllButtons () {
- const components = Object.values(buttons);
+ const components = Object.values(buttons).filter(e => e !== buttons.createButton && e !== buttons.createSvgIcon);
  return (<div style={{ display: 'flex', flexWrap: 'wrap' }}>{components.map((Button, i) => (<div key={i} style={{ width: '30%' }}>
  <Button onClick={() => alert('hello')} />
  </div>))}</div>);