React Joyride
Overview
Search…
Overview
Props
Step
Styling
Custom Components
Callback
Constants
Accessibility
Migration
Powered By
GitBook
Styling
Version 2 uses inline styles instead of V1 SCSS. To update the default theme, just pass a
styles
prop to the Joyride component, You can control the overall theme with the special
options
object.
1
const defaultOptions = {
2
arrowColor: '#fff',
3
backgroundColor: '#fff',
4
beaconSize: 36,
5
overlayColor: 'rgba(0, 0, 0, 0.5)',
6
primaryColor: '#f04',
7
spotlightShadow: '0 0 15px rgba(0, 0, 0, 0.5)',
8
textColor: '#333',
9
width: undefined,
10
zIndex: 100,
11
};
Copied!
Example
1
import
Joyride
,
{
ACTIONS
,
EVENTS
}
from
'react-joyride'
;
2
3
export
class
App
extends
React
.
Component
{
4
state
=
{
5
run
:
false
,
6
steps
:
[],
7
};
8
9
render
()
{
10
const
{
run
,
stepIndex
,
steps
}
=
this
.
state
;
11
12
return
(
13
<
div className
=
"app"
>
14
<
Joyride
15
run
=
{
run
}
16
steps
=
{
steps
}
17
styles
=
{{
18
options
:
{
19
arrowColor
:
'#e3ffeb'
,
20
backgroundColor
:
'#e3ffeb'
,
21
overlayColor
:
'rgba(79, 26, 0, 0.4)'
,
22
primaryColor
:
'#000'
,
23
textColor
:
'#004a14'
,
24
width
:
900
,
25
zIndex
:
1000
,
26
}
27
}}
28
...
29
/>
30
...
31
</
div
>
32
);
33
}
34
}
Copied!
You can customize the styles per step too.
Check
styles.js
for more information.
Or if you need finer control you can use you own components for the beacon and tooltip. Check the
custom components
documentation.
If you want to customize the arrow, check
react-floater
documentation.
Previous
Step
Next
Custom Components
Last modified
7mo ago
Copy link
Contents
Example