buttons / react-github-btn Goto Github PK

View Code? Open in Web Editor NEW

58.0 58.0 7.0 24 KB

:octocat: Unofficial github:button component for React.js

Home Page: https://buttons.github.io

License: BSD 2-Clause "Simplified" License

JavaScript 100.00%

button github react

react-github-btn's People

Contributors

Stargazers

Watchers

Forkers

bastion-rs data-to-keep littletelx360 madmanmichael187 michaelfan0310 merceyz

react-github-btn's Issues

Some errors in Next.js + TypeScript project

Sorry for the late reply.

You can also clone this project and start, you will see more details.

https://github.com/yujiangshui/next.js-typescript-github-btn-bug

It not works in Vitejs

it works at vite development mode, but throw error in production mode

I guess it can't find the import function

React component

I've just noticed the buttons no longer work on my React site. And i see that the ReadME file has taken out the 'for react component' section. Are you no longer supporting React for this?

CommonJS Module Error when used with Docusaurus TS

Description:

If I try to import GitHubButton on an index.tsx file, it is giving me the following error,

Add typescript support

Hi,
First of all thanks for a great library!
It will be great to add types for typescript support.
Thanks!

JSX element class does not support attributes because it does not have a 'props' property.

I am working with "react-github-btn" and getting this error in my webstorm linter but the code works successfully.

TS2607: JSX element class does not support attributes because it does not have a 'props' property.
TS2786: 'GitHubButton' cannot be used as a JSX component.
  Its instance type 'GitHubButton' is not a valid JSX element.
    Type 'GitHubButton' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.

Cannot use import statement outside a module

I used this component in my react website and it is working fine. I am migrating my site to next however, while using this component it gives the following error:

Steps to reproduce:

Install the library with yarn add react-github-btn
Stop the server with Control + C
Run the server again and visit the page that is consuming github buttons

The strange thing is, it works with the following steps:

Run the server with yarn dev
Install the library with yarn add react-github-btn
Use it normally and it works

The moment I restart the server same error pops up again ;(

While searching about the error on stackoverflow I found that people suggesting to add type -> module in the package.json file however it does not resolve this issue. In this case I get internal server error.

Here is the video for reference:

Screen.Recording.2021-03-12.at.8.16.56.PM.mov

Jest is failing when using GitHub Button

Hello,

Here is the failing test
https://github.com/hhimanshu/create-react-ts-starter/pull/25/checks?check_run_id=2993024014#step:4:8

Jest is complaining as below

/home/runner/work/create-react-ts-starter/create-react-ts-starter/node_modules/react-github-btn/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React, { PureComponent } from 'react'
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

      1 | import React from 'react';
    > 2 | import GitHubButton from 'react-github-btn';
        | ^
      3 | import './styles.css';
      4 |
      5 | export const Header = () => {

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)

Do you know what's going wrong and how to fix it?

Thanks

Please update to version 2.3.3 of your github-buttons

Dark theme support.
Thanks
Donald Boulton

Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<GitHubButton> & Readonly<GitHubButtonProps>'

After updating some react and typescript dependencies, I'm seeing an error when trying to create GitHubButton elements:

$ react-scripts build
Creating an optimized production build...
Failed to compile.

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: GitHubButtonProps | Readonly<GitHubButtonProps>): GitHubButton', gave the following error.
    Type '{ children: string; href: string; "data-color-scheme": string; "data-icon": string; "data-size": string; "aria-label": string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<GitHubButton> & Readonly<GitHubButtonProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<GitHubButton> & Readonly<GitHubButtonProps>'.
  Overload 2 of 2, '(props: GitHubButtonProps, context: any): GitHubButton', gave the following error.
    Type '{ children: string; href: string; "data-color-scheme": string; "data-icon": string; "data-size": string; "aria-label": string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<GitHubButton> & Readonly<GitHubButtonProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<GitHubButton> & Readonly<GitHubButtonProps>'.
     6 |   return (
     7 |     <div className="github-buttons">
  >  8 |       <GitHubButton href={`https://github.com/sponsors/${props.user}`}
       |        ^^^^^^^^^^^^
     9 |         data-color-scheme="no-preference: dark_dimmed; light: light; dark: dark;"
    10 |         data-icon="octicon-heart" data-size="large"
    11 |         aria-label={`Sponsor @${props.user} on GitHub`}>Sponsor</GitHubButton>

Relevant code:

import React from 'react';
import GitHubButton from 'react-github-btn';
import './GitHubButtons.scss';

function GitHubButtons(props: { user: string, repo: string }) {
  return (
    <div className="github-buttons">
      <GitHubButton href={`https://github.com/sponsors/${props.user}`}
        data-color-scheme="no-preference: dark_dimmed; light: light; dark: dark;"
        data-icon="octicon-heart" data-size="large"
        aria-label={`Sponsor @${props.user} on GitHub`}>Sponsor</GitHubButton>
      <GitHubButton href={`https://github.com/${props.user}/${props.repo}`}
        data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large"
        aria-label={`View ${props.user}/${props.repo} on GitHub`}>View on GitHub</GitHubButton>
      <GitHubButton href={`https://github.com/${props.user}/${props.repo}`}
        data-color-scheme="no-preference: light; light: light; dark: dark;" data-icon="octicon-star"
        data-size="large" data-show-count="true" aria-label={`Star ${props.user}/${props.repo} on GitHub`}>Star</GitHubButton>
    </div>
  );
}

DenverCoder1/custom-icon-badges#416

Any ideas how to fix this, or dependencies that need to be used?

Package breaks tests when used with ES6 imports

When I try to use this package inside an ES6 typescript project, I receive the SyntaxError: Cannot use import statement outside a module (see error below). I now solved this by mocking the react-github-btn package but wanted to let you know that something goes wrong.

Test suite failed to run

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /home/ricks/Development/personal/cra-test-test/react-github-btn-cra-ts-test/node_modules/react-github-btn/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import React, { PureComponent } from 'react'
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import GitHubButton from "react-github-btn";
        | ^
      2 | import "./App.css";
      3 | import logo from "./logo.svg";
      4 |

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1728:14)
      at Object.<anonymous> (src/App.tsx:1:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        0.692 s
Ran all test suites related to changed files.

How to reproduce

Clone the example repository.
Install the dependencies using npm i.
Run npm run test.
See error occuring.

Add a direct `theme` prop?

Hi,

I added this button to a React SPA with a dark mode toggle (Docusaurus v2). The button theme should change when the theme is toggled, and we should "decorelate" to the initial user preferenced stored in the browser.

This leads to unnatural integration where I have to provide a "mapping", while I know exactly which theme for the button I want.

import GitHubButton from "react-github-btn";
import useThemeContext from "@theme/hooks/useThemeContext";

const ThemedGithubStarButton = () => {
  // Button theme is choosen according to current Docusaurus theme, not browser preference
  const { isDarkTheme } = useThemeContext();
  const starButtonTheme = isDarkTheme ? "light" : "dark";
  const dataColorSchemeMapping = `no-preference: ${starButtonTheme}; light: ${starButtonTheme}; dark: ${starButtonTheme};`;
  return (
    <GitHubButton
      href="https://github.com/typescript-cheatsheets/react-typescript-cheatsheet"
      data-color-scheme={dataColorSchemeMapping}
      data-size="large"
      data-show-count="true"
      aria-label="Star typescript-cheatsheets/react-typescript-cheatsheet on GitHub"
    >
      Star
    </GitHubButton>
  );
};

(more context here: typescript-cheatsheets/react#233)

SyntaxError: Cannot use import statement outside a module

Hey,
I'm facing a SyntaxError: Cannot use import statement outside a module when importing react-github-btn in my typescript project

import React, { PureComponent } from 'react'
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:979:16)
    at Module._compile (internal/modules/cjs/loader.js:1027:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.react-github-btn (C:\Users\I518644\git\afuscella\portfolio\.next\server\pages\index.js:3952:18)
    at __webpack_require__ (C:\Users\I518644\git\afuscella\portfolio\.next\server\pages\index.js:23:31)
    at Module../src/components/commons/GitHubButton/index.tsx (C:\Users\I518644\git\afuscella\portfolio\.next\server\pages\index.js:982:74)   
    at __webpack_require__ (C:\Users\I518644\git\afuscella\portfolio\.next\server\pages\index.js:23:31)
    at Module../src/components/commons/Cover/index.tsx (C:\Users\I518644\git\afuscella\portfolio\.next\server\pages\index.js:664:90)
    at __webpack_require__ (C:\Users\I518644\git\afuscella\portfolio\.next\server\pages\index.js:23:31)
    at Module../src/components/screen/HomeScreen/index.tsx (C:\Users\I518644\git\afuscella\portfolio\.next\server\pages\index.js:2712:83)     
    at __webpack_require__ (C:\Users\I518644\git\afuscella\portfolio\.next\server\pages\index.js:23:31)
    at Module../pages/index.tsx (C:\Users\I518644\git\afuscella\portfolio\.next\server\pages\index.js:105:87)
C:\Users\I518644\git\afuscella\portfolio\node_modules\react-github-btn\index.js:1

Unsafe component lifecycle methods

https://github.com/ntkme/react-github-btn/blob/d210cecb47525d1a358698910300db995d382b3c/index.js#L15

This when used in apps will throw this error -

react-dom.development.js:12029 Warning: componentWillUpdate has been renamed, and is not recommended for use. See https://fb.me/react-async-component-lifecycle-hooks for details.

* Move data fetching code or side effects to componentDidUpdate.
* Rename componentWillUpdate to UNSAFE_componentWillUpdate to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.

Please update the following components: GitHubButton

You should update the lifecycle methods.

Module Parse Failed... You may need an appropriate loader to handle this file type

Getting this error code when I try to run the example in the readme:

./node_modules/react-github-btn/index.js
Module parse failed: Unexpected token (10:83)
You may need an appropriate loader to handle this file type.
|   }
|   render () {
|     return React.createElement('span', { ref: this.$ }, React.createElement('a', { ...this.props, ref: this._ }, this.props.children))
|   }
|   componentDidMount () {

My code:

import GitHubButton from "react-github-btn";

return (
...
<GitHubButton href="https://github.com/meerkat-citronella">
  Follow @meerkat-citronella
</GitHubButton>
... 
)

my package.json:

{
	"name": "portfolio",
	"version": "0.1.0",
	"private": true,
	"dependencies": {
		"chart.js": "^2.7.2",
		"cosmicjs": "^3.2.12",
		"react": "^16.12.0",
		"react-chartjs-2": "^2.11.1",
		"react-dom": "^16.12.0",
		"react-github-btn": "^1.2.0",
		"react-redux": "^5.0.7",
		"react-router": "^4.2.0",
		"react-router-dom": "^4.2.2",
		"react-scripts": "1.1.1",
		"react-typeform-embed": "^0.1.6",
		"redux": "^3.7.2",
		"semantic-ui-css": "^2.3.0",
		"semantic-ui-react": "^0.82.1",
		"styled-components": "^5.1.1"
	},
	"scripts": {
		"start": "react-scripts start",
		"build": "react-scripts build",
		"test": "react-scripts test --env=jsdom",
		"eject": "react-scripts eject",
		"deploy": "gh-pages -d build"
	},
	"homepage": ".",
	"devDependencies": {
		"gh-pages": "^1.2.0"
	}
}

add watch Counts beside the buuton

Like this picture below :