effectussoftware / react-custom-roulette Goto Github PK

Is there any possibily to fully edit and customize the roulette?
For example, can I remove the red arrow and add a different arrow

how can i know is it still spinning so i can set winner after it ends

Simply executing:

npm install --save react-custom-roulette

says "added 1893 packages, and audited 1894 packages in 1m", and creates a node_modules folder of 200MB.

Please move react-scripts from dependencies to devDependencies in package.json.

(Actually all of the dependencies can be moved to devdependencies, as nothing is needed to use this package.)

Is it possible to add a custom spin duration? Will be really helpful.

By default, the pointer is located at the top right position of the wheel. I wonder if there's any way of changing it directly to the top of the wheel. Not only its position, but also taking the top prize number when the wheel stops spinning.

I really like the component but for my use case the options are images

Tried to implement it on next, react 18 and react 17 but keeps throwing error oe[n] is undefined.

Is there a way to change the size of radius of an option,
Let's say, the roulette wheel has two options. I want the first option radius to take 70% and the second 30%>

for example pin placed on the top of the roulette wheel , is there any option to put the pin on the top.

Please activate the Wheel on React 18+

Thank you
Darius

I understand that this is not an issue or bug. I'm creating this one because I need this and if this package will support it, that will be really great.
Two moment I'm going to point one. First, if user types very long text - it would be great to crop it with three dots, if such case is possible.
The other one I believe is more way more easier to implement is support of new-line character. Something to make it like: Discount\n50%.
Thanks.

I would like to increase font sizes as screen becomes smaller. Is there a way to access the text in css?

Thanks for create amazing lib, but I need to custom font family and font size following my brand and edit spin speed. Can you help me to do that

When I proceeded to install react-custom-roulette in a React 18.0.1 project it gave me incompatibility.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.13.1" from [email protected]
npm ERR! node_modules/react-custom-roulette
npm ERR!   react-custom-roulette@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Is there any possibility to read the drawn value?
Or are there any thoughts about adding this possibility?

Hi teams! I love this roulette, thank you for let me use it!
I notice this roulette will stop after 10 secs spin is started. Since my business logic takes quite a long time to has been chosen the prize number, is it possible to make roulette spinning (like forever) until mustSpin state becomes false ?

Currently it is possible to change font-size and font-family in Roulette. However, it is not true for font-style and font-weight. It's something that is nice to have.

why the wheel only render images, do not render option string ?
my wheel before :

my wheel after:

the options section are replaced by the image,
i try only the first option have image, and my wheel:

note: i config imageProps like that:
uri: item.image,
sizeMultiplier: 0.3,
offsetX: 1,
offsetY: 0.5,

When a new user joins the roulette wheel, how to make it spin in the same position as the other clients? Into which variables do the positions need to be written and how do I get them?

I'm trying to implement in React Native but several errors occur when I installed the dependency.
For example: ERROR Error: Requiring module "node_modules/react-custom-roulette/dist/bundle.js", which threw an exception: ReferenceError: Can't find variable: Image

Another issues are:
ERROR TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[4], "react-custom-roulette").Wheel')

This error is located at:
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in Unknown (at AppContainer.js:92)
in RCTView (at View.js:32)
in Unknown (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in WinRoyTSProject(RootComponent) (at renderApplication.js:60)
ERROR TypeError: undefined is not an object (evaluating '_$$_REQUIRE(_dependencyMap[4], "react-custom-roulette").Wheel')

This error is located at:
in App (at renderApplication.js:50)
in RCTView (at View.js:32)
in Unknown (at AppContainer.js:92)
in RCTView (at View.js:32)
in Unknown (at AppContainer.js:119)
in AppContainer (at renderApplication.js:43)
in WinRoyTSProject(RootComponent) (at renderApplication.js:60)

It's related because is a React Native App and not a React project?

Hi, first of all, thank you very much for this wonderful library.
I have a concern, can we change the position of the red pinpoint image, I want it to be on top (0 degree) instead of right (45 degree).
Is it possible to customize it by changing its position?
Using CSS we cannot do that because the winning result index is taking that same position.
Please help me with this.
Thank you.

I want to stop the movement of the wheel on the button click. I managed to stop the wheel on the button click using CSS but its callback method onStopSpinning executed at the end.
Any help is appreciated.

Hi and thanks for the library! Is there a way to adjust the radius of the wheel? I believe the default is something like 500 px, but is there a way to increase it through the properties? Thanks!

I tried to add this package locally on my project but its not run successfully run in web and didn't take any changes can u suggest me what can i do please.

Reproducible if you put the following in any component. Using NextJS 13 and latest version of react-custom-roulette. This works fine when mustSpin = false, but as soon as you set it to true the error happens

    const [mustSpin, setMustSpin] = useState(false)
    const data = [
        { option: '0', style: { backgroundColor: 'green', textColor: 'black' } },
        { option: '1', style: { backgroundColor: 'white' } },
        { option: '2' },
    ]
    return <div>
        <Wheel
            mustStartSpinning={mustSpin}
            prizeNumber={3}
            data={data}
            backgroundColors={['#3e3e3e', '#df3428', '#ffeeff']}
            textColors={['#ffffff']}
            onStopSpinning={() => {
                setMustSpin(false);
            }}
        />
        <button onClick={() => setMustSpin(true)}>Spin</button>
    </div>

Hi, I am Sowmya, I would like to thank you guys for this wonderful custom module for roulette feature. But I need one more feature to add, that is, inside spin wheel to show multi line texts if in case it is possible I am sharing the image as well for reference .
with central allignment. Thank you in advance.

Is is possible to start wheel without this slightly backward rotation?

When placing a transparent color on the backgrounds, it loses transparency with each interaction with the roulette wheel. Did anyone manage to solve it?

I'm attempting to implement this in my NextJS React app via Typescript, but continue to get an error 'ReferenceError: window is not defined'

Hello, I want use react native.
But "ReferenceError: Can't find variable: Image" error
How to fix?

import React, {useState} from 'react';
import { Button, View, Image} from 'react-native';
import { Wheel } from 'react-custom-roulette

const ResultScreen = ({ navigation }: any) => {
const [spin, setSpin] = useState(false)
const data = [
{option: '1'},
{option: '2'},
{option: '3'},
{option: '4'},
{option: '5'},
{option: '6'},
]
return (

<Wheel
mustStartSpinning={spin}
prizeNumber={1}
data={data}
backgroundColors={['#3e3e3e', '#df3428']}
textColors={['#ffffff']}
/>
<Button title="spin" onPress={() => setSpin(true)} />
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />

);
}

export default ResultScreen;

Spin animation works only when changing mustStartSpinning prop first time, otherwise roulette directly showing the result without animation. If I manually remove the .started-spinning class from DOM and start again it works fine. I didn't try but maybe these changes fix the problem.

const startSpinning = () => {
    setHasStartedSpinning(true);
    setHasStoppedSpinning(false) // +
    setTimeout(() => {
      setHasStartedSpinning(false); // +
      setHasStoppedSpinning(true);
    }, START_SPINNING_TIME + CONTINUE_SPINNING_TIME + STOP_SPINNING_TIME - 300);
  };

I have made some changes in the code of this library. I want to see those changes live how I can do that. Provide some guidance for making changes in this library or add steps in read me file.

I need to wrap line text when the text is so long but I don't find a prop to do to that

Hey, roulette is really great! You provided many props to customize it, but I think that onStopSpinning method would be more useful if it returned information about the winning part.

Hello Sir,
I am using this wheel can i control speed, and rotating time?

The library is throwing reference error in the load itself for react project.

i am going to custom font-size for option string, although we have fontSize attribute, i can not customize font-size, the font-size always is 1rem. is any guy help me, please

At least until version 1.5.4, it doesn't work on React 18. I would appreciate it if you could fix it, thank you!

When using multiple instances of a Wheel component with MiltiSpin, the last wheels seem to 'flikker' to the richt index after they stopped spinning

Cool project, I like it!

Is it possible to add an inverse prize picker? E.g. someone not winning the prize?

Thanks a ton!

Hello i found the project is great but as a newbi i don't know how to use typescript ... is it possible to git clone this project and npm start it normally ?

any help ?

Regards,

ERROR in ./node_modules/react-custom-roulette/dist/bundle.js
Module not found: Error: [CaseSensitivePathsPlugin] /Users/shakti97/Documents/Involvio/hackathon/lucky-spin/node_modules/React/index.js does not match the corresponding path on disk react.

Can you change the font family?

When i try to launch your example i got this error
`Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.`

It's a really cool thing. Thanks to the authors.
How can I change the roulette wheel picture?

Hey, I like your Component but I have a problem. I want to add/remove possible options from the Wheel with useState. I made a little CodeSandbox to show a example. For some reason the data in the Wheel is delayed by one State Update. You can see that by watching at the List with Options (Which is just the state, iterated as a jsx list). I don't know if this is a problem how I set/update the State or if the Component isn't compatible with it. I'd appreciate any kind of help 👋🏻

Hello, thanks for good roulette. Have one question, is that posible after first render wheel set cursor on selected value wihtout spin?:)