hermanya / create-react-hook Goto Github PK

The current version of react is v17, but the templates are using v16

ts user needs dist/index.d.ts.

ts template's package.json does not include "files".

  "files": [
    "dist"
  ],

everyone finally adds the option to package.json by typescript module.

https://github.com/Hermanya/use-interval/blob/master/package.json#L50
https://github.com/Hermanya/use-typing-effect/blob/master/package.json#L48

also me https://github.com/elzup/use-seconds/blob/master/package.json#L11

Hello there, I just wanted to say that I was able to use create-react-hook as a great scaffold to write a standalone hook and I had no issues and was up and running in short order. Nice work!

If you care to add https://www.npmjs.com/package/use-media-set to your list of happy users, feel free!

I am trying to publish my own hook as a package.
The library works fine. I can run the code in the given example code.
but when I link the library to an existing project or publish the library,
I get error message saying the hook is breaking the rule.
I tried updating the react version, still the problem remains.

my jest.config.js file is this

module.exports = {
	moduleFileExtensions: ['ts', 'js'],
	testRegex: '/__tests__/.*\\.(ts|js)$',
	transformIgnorePatterns: ['<rootDir>/node_modules/']
};

I have my test files in tests folder

Console ouptut

npm test  

> [email protected] test /home/calebdeji/workspace/open-source/use-network-status
> cross-env CI=1 react-scripts test --env=jsdom

No tests found, exiting with code 1
Run with `--passWithNoTests` to exit with code 0
In /home/calebdeji/workspace/open-source/use-network-status
  3 files checked.
  testMatch: /home/calebdeji/workspace/open-source/use-network-status/src/**/__tests__/**/*.{js,jsx,ts,tsx}, /home/calebdeji/workspace/open-source/use-network-status/src/**/*.{spec,test}.{js,jsx,ts,tsx} - 0 matches
  testPathIgnorePatterns: /node_modules/ - 3 matches
  testRegex:  - 0 matches
Pattern:  - 0 matches
npm ERR! Test failed.  See above for more details.

I have recently released my first library ever using your awesome package. I would really appreciate if you add my lib into your README library section.

https://github.com/zaingz/use-axios-hooks
https://www.npmjs.com/package/use-axios-hooks

https://www.npmjs.com/package/react-indicative-hooks :)

Thanks for the excellent tool! I've used it to create a hook for loading WASM into React apps with as-bind, any chance you'd be able to add it to the list of hooks in the readme?

npm test script did not recognize the generated test 'test.ts'. I had to rename it to 'index.test.ts' for it to recognize.

Can it be generated as 'index.test.ts'? I think default for jest is to look for pattern '*.test.ts'.

Thanks for creating this create script. It saved my a lot of work. Could please add my hook to your readme? Details are listed below:

https://github.com/ZengLawrence/use-auto-progress
https://www.npmjs.com/package/use-auto-progress

I ran into 2 problems while using this create script on Mac:

1. I had to use "sudo" to run the script because it made a symlink to .npm folder (global one on Mac).
2. Because of above, local git repository was created with a root permission, which cause any update to local repository to fail due to permission issue. I had to delete .git folder and clone directly from my remote repository. Can you add an option and warning to skip git repository creation?

Thanks
Lawrence

I can't upload and publish my hook :(

0 verbose cli [
0 verbose cli 'C:\Program Files\nodejs\node.exe',
0 verbose cli 'C:\Users<my-pc-user>\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js',
0 verbose cli 'publish',
0 verbose cli '--access=public'
0 verbose cli ]
1 info using [email protected]
2 info using [email protected]
3 timing config:load:defaults Completed in 2ms
4 timing config:load:file:C:\Users<my-pc-user>\AppData\Roaming\npm\node_modules\npm\npmrc Completed in 2ms
5 timing config:load:builtin Completed in 2ms
6 timing config:load:cli Completed in 3ms
7 timing config:load:env Completed in 1ms
8 timing config:load:file:E:\santuario\hooks\use-window-size.npmrc Completed in 0ms
9 timing config:load:project Completed in 1ms
10 timing config:load:file:C:\Users<my-pc-user>.npmrc Completed in 1ms
11 timing config:load:user Completed in 1ms
12 timing config:load:file:C:\Users<my-pc-user>\AppData\Roaming\npm\etc\npmrc Completed in 1ms
13 timing config:load:global Completed in 1ms
14 timing config:load:cafile Completed in 0ms
15 timing config:load:validate Completed in 0ms
16 timing config:load:setUserAgent Completed in 1ms
17 timing config:load:setEnvs Completed in 1ms
18 timing config:load Completed in 13ms
19 verbose npm-session a28a22955a7dfe8e
20 timing npm:load Completed in 29ms
21 verbose publish [ '.' ]
22 notice
23 notice 📦 /[email protected]
24 notice === Tarball Contents ===
25 notice 2.0kB README.md
25 notice 165B .babelrc
25 notice 147B .editorconfig
25 notice 26B .env
25 notice 416B .eslintrc
25 notice 68B .travis.yml
25 notice 4.0kB dist/index.es.js
25 notice 3.9kB dist/index.es.js.map
25 notice 4.1kB dist/index.js
25 notice 3.9kB dist/index.js.map
25 notice 239B example/.env
25 notice 1.2MB example/package-lock.json
25 notice 658B example/package.json
25 notice 466B example/public/index.html
25 notice 210B example/public/manifest.json
25 notice 104.9kB example/README.md
25 notice 1.4kB example/src/App.js
25 notice 162B example/src/index.css
25 notice 164B example/src/index.js
25 notice 34.2kB package.json
25 notice 631B rollup.config.js
25 notice 36B src/.eslintrc
25 notice 1.6kB src/index.js
25 notice 628B src/index.test.js
26 notice === Tarball Details ===
27 notice name: /use-window-size
27 notice version: 1.0.0
27 notice filename: /use-window-size-1.0.0.tgz
27 notice package size: 351.4 kB
27 notice unpacked size: 1.4 MB
27 notice shasum: 634ace7dec98367e1007eac6bf92800e93befc46
27 notice integrity: sha512-s6wfGxdiIQuXr[...]Sbwo4xU5Dyz0Q==
27 notice total files: 24
28 notice
29 http fetch PUT 400 https://registry.npmjs.org/%2fuse-window-size 3546ms
30 timing command:publish Completed in 8340ms
31 verbose stack Error: 400 Bad Request - PUT https://registry.npmjs.org/%2fuse-window-size - Too many dependencies.
31 verbose stack at C:\Users<my-pc-user>\AppData\Roaming\npm\node_modules\npm\node_modules\npm-registry-fetch\check-response.js:123:15
31 verbose stack at async publish (C:\Users<my-pc-user>\AppData\Roaming\npm\node_modules\npm\node_modules\libnpmpublish\publish.js:43:12)
31 verbose stack at async publish_ (C:\Users<my-pc-user>\AppData\Roaming\npm\node_modules\npm\lib\publish.js:115:5)
31 verbose stack at async publish (C:\Users<my-pc-user>\AppData\Roaming\npm\node_modules\npm\lib\publish.js:44:19)
32 verbose statusCode 400
33 verbose pkgid /[email protected]
34 verbose cwd E:\santuario\hooks\use-window-size
35 verbose Windows_NT 10.0.19041
36 verbose argv "C:\Program Files\nodejs\node.exe" "C:\Users<my-pc-user>\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "publish" "--access=public"
37 verbose node v14.15.5
38 verbose npm v7.5.4
39 error code E400
40 error 400 Bad Request - PUT https://registry.npmjs.org/%2fuse-window-size - Too many dependencies.
41 verbose exit 1

Here's the line it gets stuck at :

master└─ $ npm publish

> [email protected] prepare .
> npm run build


> [email protected] build /home/natesh/Desktop/use-game-of-life
> rollup -c


src/index.tsx → dist/index.js, dist/index.es.js...
created dist/index.js, dist/index.es.js in 1.2s
[..................] / : info lifecycle [email protected]~prepare: [email protected]

Thank you

Hello

I'm doing a hook library that also needs to bundle components that can be used with the provided hooks.

So as soon as I add some jsx then it throws the following message:

[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
src/index.tsx (5:9)
3: 
4: export const Foo = () => {
5:   return <div></div>;
            ^
6: };

I'm not familiar with rollup and thus I'm not sure how to fix it. Can you help with configuring rollup properly to compile jsx?

Thanks

I was writing a hook module for npm and I came across your project. You saved me a bunch of time. So thanks.

It'd be great if you wanted to add a silly module to your list of supporters.

https://github.com/jarlah/react-rxjs-hook

I have released a tiny react hook library, with the help of your amazing tool. I would appreciate you putting it into your README section :)

https://github.com/macfire10/react-shortcuts-hook
https://www.npmjs.com/package/react-shortcuts-hook

Edit: this is solved by updating the packates (using ncu -u in my case)

Running the rollup build fails on the typescript plugin step, complaining about a recursive definition.

src/index.ts → dist/index.js, dist/index.es.js...
[!] (plugin typescript) Error: @rollup/plugin-typescript TS2456: Type alias 'UpTo' circularly references itself.
src/index.ts (34:6)

34 type UpTo<T extends readonly any[], K extends T[number]> = K extends First<T> ? K : (K | UpTo<T, Previous<T, K>>);
        ~~~~

Error: @rollup/plugin-typescript TS2456: Type alias 'UpTo' circularly references itself.
    at error (use-date-countdown/node_modules/rollup/dist/shared/rollup.js:5279:30)
    at throwPluginError (use-date-countdown/node_modules/rollup/dist/shared/rollup.js:18240:12)
    at Object.error (use-date-countdown/node_modules/rollup/dist/shared/rollup.js:18847:24)
    at emitDiagnostic (use-date-countdown/node_modules/@rollup/plugin-typescript/dist/index.js:415:17)
    at reportDiagnostics (use-date-countdown/node_modules/@rollup/plugin-typescript/dist/index.js:423:9)
    at Array.forEach (<anonymous>)
    at emitFilesAndReportErrors (use-date-countdown/node_modules/typescript/lib/typescript.js:105333:21)
    at Object.result.afterProgramCreate (use-date-countdown/node_modules/typescript/lib/typescript.js:105503:13)
    at Object.afterProgramCreate (use-date-countdown/node_modules/@rollup/plugin-typescript/dist/index.js:515:29)
    at synchronizeProgram (use-date-countdown/node_modules/typescript/lib/typescript.js:105767:22)

Compiling purely with typescript tsc goes through without error. The UpTo type is recursive but not infinite:

type Pop<A extends readonly any[]> = ((...all: A) => void) extends ((popped: any, ...rest: infer R) => void) ? R : [];
type Push<I, R extends readonly any[]> = ((item: I, ...rest: R) => void) extends ((...all: infer A) => void) ? A : unknown;
type Rev<A extends readonly any[], P extends readonly any[] = []> = 0 extends A["length"] ? P : Rev<Pop<A>, Push<A[0], P>>;
type Next<A extends readonly any[], I extends A[number]> = 0 extends A["length"] ? never : 1 extends A["length"] ? never : I extends A[0] ? A[1] : Next<Pop<A>, I>;
type Previous<A extends readonly any[], I extends A[number]> = Next<Rev<A>, I>;
type UpTo<A extends readonly any[], I extends A[number]> = I extends A[0] ? I : (I | UpTo<A, Previous<A, I>>);

Hi, Herman.

I'm using this CLI to share some custom hooks on npm. However, when I commit some code to the master branch on github, travis throws an error when it tries to run yarn test. The error is the following one:

The react-scripts package provided by Create React App requires a dependency:
  "eslint": "^6.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
/home/travis/build/lcnogueira/awesome-react-custom-hooks/node_modules/eslint (version: 5.16.0) 

As you can see, the problem is the eslint version inside the example folder (it uses create-react-app) is different from the one in the root folder.

I followed the instructions (https://travis-ci.com/lcnogueira/awesome-react-custom-hooks/builds/148590935) to solve the problem, but It only worked when I set an environment variable SKIP_PREFLIGHT_CHECK inside the travis.yml file (the same way we have inside .env file):

language: node_js
node_js:
  - 8
env:
  - SKIP_PREFLIGHT_CHECK=true

Do you think is it worth including this variable inside travis.yml by default?

Hey @Hermanya , thanks a lot for this sweet cli, made my life so much easier and it was fun to play with

wanted to contribute and add a custom hook I made for my own needs

https://github.com/this-fifo/use-marked-hook
https://www.npmjs.com/package/use-marked-hook

feel free to add it to the list if you wish :)

Hey there! First off, thanks for making this 🙏🏼 I found create-react-library-boilerplate and had to tweak it for hooks and thought about creating a spinoff library for hooks but then found yours :)

Unfortunately, I'm running into some issues and wanted to see if you might know how to fix them.

Expected Behavior

When I install create-react-hook globally using npm i -g create-react-hook or run it locally using npx create-react-hook, I should be able to cd into the example directory after following the prompts and be able to start the create-react-app.

Actual Behavior

react-scripts throws an error due to mismatched eslint versions.

react-scripts start

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "eslint": "5.12.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:

  /Users/joe/Dev/testing/test-hook/node_modules/eslint (version: 5.6.0)

Screen-recording part 1:

Screen-recording part 2:

Steps to Reproduce the Problem

1. Run `npm i -g create-react-hook
2. Run create-react-hook
3. After completing the configuration and project setup, cd /example && npm start
4. See error.

Things I've tried:

• manually installing[email protected] in the root
• upgrading react-scripts in both the root and the /example directory to v3
• downgrading node to v10.16.0
• using npm and yarn (both show the same error)
• deleting node_modules in the /example directory and reinstalling

Specifications

• Version: node v12.5.0 npm 6.9.2 yarn 1.17.3
• Platform: macOS Mojave 10.14.5

If you have seen this or have other ideas on how to fix it, please let me know and I'd be happy to submit a PR. I need this CLI tool for an egghead course I'm creating so if I can't get it to work, I'll have to go with create-react-library.

I was able to get that to work by using yalc instead of npm/yarn link so that may be what I do.

Consider adding react-hooks-testing-library for testing custom hooks separately - sort of like unit tests. This should be part of src/tests.
Examples folder can be kept for demo purpose and integration testing

help
when i init the project,it keep on npm installing,and i can see the progress~

Just created this hook using you library https://github.com/frankiesardo/use-reducer-with-effects

It was incredibly simple, thanks for your work!

use-pusher - hooks wrapper around pusher-js. You made it a breeze.

Hey @Hermanya I wanted to contribute and add a custom hook I made for some project I worked on

https://github.com/GuySerfaty/use-debounce-input
https://www.npmjs.com/package/use-debounce-input

Issue

Attempt to create a new package with an invalid name (not from params) causes the program to freeze.

Repro steps

1. Call create-react-hook with no params
2. When asked for package name include caps on it, for example myPackageName
3. Program freezes

Expected

Program should not freeze and print some sort of message

Workaround

The program is freezing on an error because package names should not include caps. Include the name as a param create-react-hook myPackageName and you will see the actual error:

Error: invalid package name "myPackageName"...

Additional notes

As I previously said, adding an invalid name from params prints the error. I expect them to behave similarly.