https://github.com/ozluy/react-guider
⬆️ ➡️ Guide Component for applications guide for user ⬇️ ⬅️
https://github.com/ozluy/react-guider
application guide guider onboarding react starter
Last synced: 4 months ago
JSON representation
⬆️ ➡️ Guide Component for applications guide for user ⬇️ ⬅️
- Host: GitHub
- URL: https://github.com/ozluy/react-guider
- Owner: ozluy
- License: mit
- Created: 2016-12-10T21:16:05.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-12-13T20:16:18.000Z (over 8 years ago)
- Last Synced: 2025-01-31T10:51:15.472Z (4 months ago)
- Topics: application, guide, guider, onboarding, react, starter
- Language: JavaScript
- Homepage: http://ozluy.github.io/projects/react-guider/
- Size: 57.6 KB
- Stars: 8
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-guider
Guide menu for applications
#### demo
DEMO LINK
#### GuiderItem props
```jsx
onButtonClick: PropTypes.func, // Button onClick funtion inside Guider Content: onButtonClick={ () => console.log('clicked button')}
onOpen: PropTypes.func, // Triggers when you click open button: onOpen={ () => console.log('clicked open button')}
onClose: PropTypes.func, // Triggers when you click close button: onClose={ () => console.log('clicked close button')}
text: PropTypes.string, // GuiderItem content text: text= 'This is a demo.'
buttonLabel: PropTypes.string, // GuiterItem button bale: buttonLabel='next'
left: PropTypes.string, // left style attribute of GuiderItem in document: left='25px'
top: PropTypes.string, // top style attribute of GuiderItem in document: top='25px'
bottom: PropTypes.string, // bottom style attribute of GuiderItem in document: bottom='25px'
right: PropTypes.string, // right style attribute of GuiderItem in document: right='25px'
isActive: PropTypes.bool, // state content of GuiderItem open or not: isActive={true}
contentPositon: PropTypes.object // position of GuiderItem content: contentPositon={{top: '-50px',right: 'auto', bottom: 'auto',left: '-300px'}}
```
#### Guider props
```jsx
isOpen: PropTypes.bool, // state of Guider: isOpen={false}
children: PropTypes.node
```
#### useage
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import { ReactGuider, ReactGuiderItem } from './lib/main';
require('./lib/react-guider.scss');
// // Render the main component into the dom
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
isGuideOpen: true,
listOfItems: [
{
top: '300px',
left: '50px',
buttonLabel: 'next',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, unde!',
onButtonClick: () => {
this.setState({
activeElement: 2
})
}
},
{
top: '300px',
left: '50%',
right: '50%',
buttonLabel: 'next',
text: 'Lorem ipsum dolor sit amet, consectetur.',
onButtonClick: () => {
this.setState({
activeElement: 3
})
}
},
{
top: '100px',
right: '60px',
buttonLabel: 'next',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, excepturi.',
contentPositon: {
top: '-50px',
right: 'auto',
bottom: 'auto',
left: '-300px'
},
onButtonClick: () => {
this.setState({
activeElement: 1
})
}
},
{
top: '500px',
right: '50px',
buttonLabel: 'finish',
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit, autem.',
contentPositon: {
top: '-150px',
right: 'auto',
bottom: 'auto',
left: '-300px'
},
onButtonClick: () => {
this.setState({
activeElement: -1,
isGuideOpen: false
})
}
}
],
activeElement: -1
}
}
_handleOnClose() {
this.setState({
activeElement: -1
});
}
_handleOnOpen(_index) {
this.setState({
activeElement: _index
});
}
render() {
const _s = this.state;
return (
{
!_s.isGuideOpen
&&
this.setState({ isGuideOpen: true })}>
Restart
}
{
_s.listOfItems.map((_item, _index) => {
return (
)
})
}
);
}
}
if (module.hot) {
module.hot.accept();
}
ReactDOM.render(, document.getElementById('app'));
```