https://github.com/igoyalsamarth/reaction-timer-microservice
Reaction Time Test microservice with easy backend integration and easy out-of-the-box functionality. Support for localStorage and Analytics for tracking your progress. Type safe code with easy adaptability with Javascript.
https://github.com/igoyalsamarth/reaction-timer-microservice
library microservice npm recharts typescript
Last synced: about 2 months ago
JSON representation
Reaction Time Test microservice with easy backend integration and easy out-of-the-box functionality. Support for localStorage and Analytics for tracking your progress. Type safe code with easy adaptability with Javascript.
- Host: GitHub
- URL: https://github.com/igoyalsamarth/reaction-timer-microservice
- Owner: igoyalsamarth
- License: mit
- Created: 2023-12-09T09:01:09.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-13T14:07:43.000Z (over 2 years ago)
- Last Synced: 2025-10-02T07:54:28.527Z (9 months ago)
- Topics: library, microservice, npm, recharts, typescript
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/@goyalsamarth/reaction-time-microservice
- Size: 12.6 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# reaction-timer-microservice
#### This is a reaction timer package, ready to install and use directly in your project, made in a headless UI way (I love them), you can customize it using TailwindCSS and satisfy the design enthusiast.
## Sample Code
```
import { ReactionTime, Analytics } from "./ReactionTimer";
import { useState } from "react";
function App() {
const [reactionTimeState, setReactionTimeState] = useState(0);
return (
<>
{reactionTimeState}
>
)
}
export default App
```
## Reaction Time Test Tile:
`ReactionTime` is the component that can be imported and used for the functionality.
The `reactionTimeOutput` is a *required number-type* state that needs to be declared manually which also serves as the output of the individual tests. At the same time, the `setReactionTimeOutput` is the state function and must be defined inside the component.
### List of Parameters:
1. `waitTime` *(number)* *optional*: The time you would like the timer to stay *red* or wait for the *click*.
2. `className` *(string)* *optional*: The styling of the reaction time area, is strictly based on *tailwind* and can be treated as a `div`.
3. `needInstruction` *(boolean)* *optional* defaults to `true`: Control whether you need the instructions or not.
4. `instructionClassName` *(string)* *optional*: The styling of the instructions, is strictly based on *tailwind*.
5. `onReactionTimeChange` *(state-function)* *optional*: The state function of the declared state to feed in the changed values to the state.
## Analytics Data Tile:
The `Analytics` is the component that can be imported and used for the *Analysis* of the Tests Taken.
The `Analytics Graph` tracks the values of `Average Reaction Time`, `Best Reaction Time Scores`, and `All Reaction Time Scores`
`Note:` `localStorage` is used to store the Reaction Time Test data and hence should be used carefully and only on the client side.
### List of Parameters:
1. `className` *(string)* *optional*: The styling of the reaction time area, is strictly based on *tailwind* and can be treated as a `div`.
2. `height` *(number)* *optional* defaults to `full height` of the `parent div`: The height of the graph object present inside the parent *div*.
3. `width` *(number)* *optional* defaults to `full width` of the `parent div`: The width of the graph object present inside the parent *div*.
4. `onReactionTimeChange` *(state-function)* *optional*: The state function of the declared state to feed in the changed values to the state.