Update Tooltip
This commit is contained in:
Angelos Chalaris
214
README.md
214
README.md
@ -1001,45 +1001,37 @@ ReactDOM.render(
|
||||
|
||||
Renders a ticker component.
|
||||
|
||||
- The ticker state is initially set to zero
|
||||
- When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval`
|
||||
- When the `Reset` button is clicked, the value of the timer is set to zero and the `setInterval` is cleared
|
||||
- The `setInterval` is cleared once the desired `time` is reached
|
||||
- `time` and `interval` are the required props
|
||||
Use the `React.useState()` hook to initialize the `ticker` state variable to `0`.
|
||||
Define two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.
|
||||
Return a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.
|
||||
|
||||
```jsx
|
||||
class Ticker extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {ticker: 0}
|
||||
this.interval = null
|
||||
}
|
||||
function Ticker(props) {
|
||||
const [ticker, setTicker] = React.useState(0);
|
||||
let interval = null;
|
||||
|
||||
tick = () => {
|
||||
this.reset()
|
||||
this.interval = setInterval(() => {
|
||||
if (this.state.ticker < this.props.times) {
|
||||
this.setState(({ ticker }) => ({ticker: ticker + 1}))
|
||||
}else{
|
||||
clearInterval(this.interval)
|
||||
}
|
||||
}, this.props.interval)
|
||||
}
|
||||
const tick = () => {
|
||||
reset();
|
||||
interval = setInterval(() => {
|
||||
if (ticker < props.times)
|
||||
setTicker(ticker + 1);
|
||||
else
|
||||
clearInterval(interval);
|
||||
}, props.interval);
|
||||
}
|
||||
|
||||
reset = () => {
|
||||
this.setState({ticker: 0})
|
||||
clearInterval(this.interval)
|
||||
}
|
||||
const reset = () => {
|
||||
setTicker(0);
|
||||
clearInterval(interval);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<span style={{fontSize: 100}}>{this.state.ticker}</span>
|
||||
<button onClick={this.tick}>Tick!</button>
|
||||
<button onClick={this.reset}>Reset</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<span style={{ fontSize: 100 }}>{this.state.ticker}</span>
|
||||
<button onClick={this.tick}>Tick!</button>
|
||||
<button onClick={this.reset}>Reset</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@ -1057,49 +1049,30 @@ ReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('r
|
||||
|
||||
Renders a toggle component.
|
||||
|
||||
Initialize `state.isToggleOn` to `false`, bind the `handleClick` method to the component's context.
|
||||
Use the `React.useState()` to initialize the `isToggleOn` state variable to `false`.
|
||||
Use an object, `style`, to hold the styles for individual components and their states.
|
||||
Create a method, `handleClick`, which uses `Component.prototype.setState` to change the component's `state.toggleOn`.
|
||||
In the `render()` method, destructure `state` and `style`, create a `<button>` that alters the component's `state` and determine the appearance of the content based on `state.isToggleOn`, applying the appropriate CSS rules from the `style` object.
|
||||
Return a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.
|
||||
|
||||
```jsx
|
||||
class Toggle extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
isToggleOn: false
|
||||
};
|
||||
this.style = {
|
||||
on: {
|
||||
backgroundColor: 'green'
|
||||
},
|
||||
off: {
|
||||
backgroundColor: 'grey'
|
||||
}
|
||||
};
|
||||
function Toggle(props) {
|
||||
const [isToggleOn, setIsToggleOn] = React.useState(false);
|
||||
style = {
|
||||
on: {
|
||||
backgroundColor: "green"
|
||||
},
|
||||
off: {
|
||||
backgroundColor: "grey"
|
||||
}
|
||||
};
|
||||
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
|
||||
handleClick() {
|
||||
this.setState(state => ({
|
||||
isToggleOn: !state.isToggleOn
|
||||
}));
|
||||
}
|
||||
|
||||
render() {
|
||||
const { isToggleOn } = this.state;
|
||||
const { on, off } = this.style;
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={this.handleClick}
|
||||
style={isToggleOn ? on : off}
|
||||
>
|
||||
{isToggleOn ? 'ON' : 'OFF'}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<button
|
||||
onClick={() => setIsToggleOn(!isToggleOn)}
|
||||
style={isToggleOn ? style.on : style.off}
|
||||
>
|
||||
{isToggleOn ? "ON" : "OFF"}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@ -1117,67 +1090,48 @@ ReactDOM.render(<Toggle />, document.getElementById('root'));
|
||||
|
||||
Renders a tooltip component.
|
||||
|
||||
Set the `state` of the component to `show: false` initially, define an object, `style`, to hold the styles for individual components and their states.
|
||||
Create a method, `toggleTooltip`, which uses `this.setState` to change the state's `show` property from `true` to `false` and vice versa.
|
||||
Bind `showTooltip` and `hideTooltip` to the component's context with the respective values of `true` and `false`.
|
||||
In the `render()` method, compute if the tooltip should be shown or hidden, render the content of the tooltip and bind the `onMouseEnter` and `onMouseLeave` events to `showTooltip` and `hideTooltip` respectively.
|
||||
Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.
|
||||
Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.
|
||||
Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.
|
||||
|
||||
```css
|
||||
.tooltip {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
visibility: hidden;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: rgba(0, 0, 0, 0.7) transparent transparent;
|
||||
}
|
||||
```
|
||||
|
||||
```jsx
|
||||
class Tooltip extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
show: false
|
||||
};
|
||||
this.style = {
|
||||
tooltip: {
|
||||
position: 'relative',
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
color: "white",
|
||||
visibility: "hidden",
|
||||
width: "fit-content",
|
||||
padding: 5,
|
||||
borderRadius: 5
|
||||
},
|
||||
tooltipArrow: {
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
left: '50%',
|
||||
borderWidth: 5,
|
||||
borderStyle: 'solid',
|
||||
borderColor: "rgba(0,0,0,0.7) transparent transparent",
|
||||
},
|
||||
visible: {
|
||||
visibility: "visible"
|
||||
},
|
||||
};
|
||||
this.showTooltip = this.toggleTooltip.bind(this, true);
|
||||
this.hideTooltip = this.toggleTooltip.bind(this, false);
|
||||
}
|
||||
function Tooltip({ children, text, ...rest }) {
|
||||
const [show, setShow] = React.useState(false);
|
||||
|
||||
toggleTooltip = tooltipState => {
|
||||
this.setState({
|
||||
show: tooltipState
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, text, ...rest } = this.props;
|
||||
const { show } = this.state;
|
||||
const { visible, tooltip, tooltipArrow } = this.style;
|
||||
const showTooltip = show ? visible : {};
|
||||
return (
|
||||
<div>
|
||||
<div style={{ ...tooltip, ...showTooltip }}>
|
||||
{text}
|
||||
<span style={tooltipArrow}/>
|
||||
</div>
|
||||
<div {...rest} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
|
||||
{children}
|
||||
</div>
|
||||
return (
|
||||
<div>
|
||||
<div className="tooltip" style={show ? { visibility: "visible" } : {}}>
|
||||
{text}
|
||||
<span className="tooltip-arrow" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div
|
||||
{...rest}
|
||||
onMouseEnter={() => setShow(true)}
|
||||
onMouseLeave={() => setShow(false)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -247,9 +247,9 @@
|
||||
{
|
||||
"name": "Ticker.md",
|
||||
"title": "Ticker",
|
||||
"text": "Renders a ticker component.\n\n- The ticker state is initially set to zero \n- When the `Tick!` button is clicked, `timer` is incremented periodically at the given `interval`\n- When the `Reset` button is clicked, the value of the timer is set to zero and the `setInterval` is cleared\n- The `setInterval` is cleared once the desired `time` is reached\n- `time` and `interval` are the required props\n\n",
|
||||
"text": "Renders a ticker component.\n\nUse the `React.useState()` hook to initialize the `ticker` state variable to `0`.\nDefine two methods, `tick` and `reset`, that will periodically increment `timer` based on `interval` and reset `interval` respectively.\nReturn a `<div>` with two `<button>` elements, each of which calls `tick` and `reset` respectively.\n\n",
|
||||
"codeBlocks": [
|
||||
"```jsx\nclass Ticker extends Component {\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.state = {ticker: 0}\n\t\tthis.interval = null\n\t}\n\n\ttick = () => {\n\t\tthis.reset()\n\t\tthis.interval = setInterval(() => {\n\t\t\tif (this.state.ticker < this.props.times) {\n\t\t\t\tthis.setState(({ ticker }) => ({ticker: ticker + 1}))\n\t\t\t}else{\n\t\t\t\tclearInterval(this.interval)\n\t\t\t}\n\t\t}, this.props.interval)\n\t}\n\n\treset = () => {\n\t\tthis.setState({ticker: 0})\n\t\tclearInterval(this.interval)\n\t}\n\n\trender() {\n\t\treturn (\n\t\t\t<div>\n\t\t\t\t<span style={{fontSize: 100}}>{this.state.ticker}</span> \n\t\t\t\t<button onClick={this.tick}>Tick!</button>\n\t\t\t\t<button onClick={this.reset}>Reset</button>\n\t\t\t</div>\n\t\t);\n\t}\n}\n```",
|
||||
"```jsx\nfunction Ticker(props) {\n const [ticker, setTicker] = React.useState(0);\n let interval = null;\n\n const tick = () => {\n reset();\n interval = setInterval(() => {\n if (ticker < props.times) \n setTicker(ticker + 1);\n else \n clearInterval(interval);\n }, props.interval);\n }\n\n const reset = () => {\n setTicker(0);\n clearInterval(interval);\n }\n\n return (\n <div>\n <span style={{ fontSize: 100 }}>{this.state.ticker}</span>\n <button onClick={this.tick}>Tick!</button>\n <button onClick={this.reset}>Reset</button>\n </div>\n );\n}\n```",
|
||||
"```jsx\nReactDOM.render(<Ticker times={5} interval={1000} />, document.getElementById('root'));\n```"
|
||||
],
|
||||
"expertise": 1,
|
||||
@ -263,9 +263,9 @@
|
||||
{
|
||||
"name": "Toggle.md",
|
||||
"title": "Toggle",
|
||||
"text": "Renders a toggle component.\n\nInitialize `state.isToggleOn` to `false`, bind the `handleClick` method to the component's context.\nUse an object, `style`, to hold the styles for individual components and their states.\nCreate a method, `handleClick`, which uses `Component.prototype.setState` to change the component's `state.toggleOn`.\nIn the `render()` method, destructure `state` and `style`, create a `<button>` that alters the component's `state` and determine the appearance of the content based on `state.isToggleOn`, applying the appropriate CSS rules from the `style` object.\n\n",
|
||||
"text": "Renders a toggle component.\n\nUse the `React.useState()` to initialize the `isToggleOn` state variable to `false`.\nUse an object, `style`, to hold the styles for individual components and their states.\nReturn a `<button>` that alters the component's `isToggledOn` when its `onClick` event is fired and determine the appearance of the content based on `isToggleOn`, applying the appropriate CSS rules from the `style` object.\n\n",
|
||||
"codeBlocks": [
|
||||
"```jsx\nclass Toggle extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n isToggleOn: false\n };\n this.style = {\n on: {\n backgroundColor: 'green'\n },\n off: {\n backgroundColor: 'grey'\n }\n };\n\n this.handleClick = this.handleClick.bind(this);\n }\n\n handleClick() {\n this.setState(state => ({\n isToggleOn: !state.isToggleOn\n }));\n }\n\n render() {\n const { isToggleOn } = this.state;\n const { on, off } = this.style;\n\n return (\n <button\n onClick={this.handleClick}\n style={isToggleOn ? on : off}\n >\n {isToggleOn ? 'ON' : 'OFF'}\n </button>\n );\n }\n}\n```",
|
||||
"```jsx\nfunction Toggle(props) {\n const [isToggleOn, setIsToggleOn] = React.useState(false);\n style = {\n on: {\n backgroundColor: \"green\"\n },\n off: {\n backgroundColor: \"grey\"\n }\n };\n\n return (\n <button\n onClick={() => setIsToggleOn(!isToggleOn)}\n style={isToggleOn ? style.on : style.off}\n >\n {isToggleOn ? \"ON\" : \"OFF\"}\n </button>\n );\n}\n```",
|
||||
"```jsx\nReactDOM.render(<Toggle />, document.getElementById('root'));\n```"
|
||||
],
|
||||
"expertise": 0,
|
||||
@ -279,9 +279,10 @@
|
||||
{
|
||||
"name": "Tooltip.md",
|
||||
"title": "Tooltip",
|
||||
"text": "Renders a tooltip component.\n\nSet the `state` of the component to `show: false` initially, define an object, `style`, to hold the styles for individual components and their states.\nCreate a method, `toggleTooltip`, which uses `this.setState` to change the state's `show` property from `true` to `false` and vice versa.\nBind `showTooltip` and `hideTooltip` to the component's context with the respective values of `true` and `false`.\nIn the `render()` method, compute if the tooltip should be shown or hidden, render the content of the tooltip and bind the `onMouseEnter` and `onMouseLeave` events to `showTooltip` and `hideTooltip` respectively.\n \n",
|
||||
"text": "Renders a tooltip component.\n\nUse the `React.useState()` hook to create the `show` variable and initialize it to `false`.\nReturn a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.\nHandle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.\n \n",
|
||||
"codeBlocks": [
|
||||
"```jsx\nclass Tooltip extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n show: false\n };\n this.style = {\n tooltip: {\n position: 'relative',\n backgroundColor: \"rgba(0,0,0,0.7)\",\n color: \"white\",\n visibility: \"hidden\",\n width: \"fit-content\",\n padding: 5,\n borderRadius: 5\n },\n tooltipArrow: {\n position: 'absolute',\n top: '100%',\n left: '50%',\n borderWidth: 5,\n borderStyle: 'solid',\n borderColor: \"rgba(0,0,0,0.7) transparent transparent\",\n },\n visible: {\n visibility: \"visible\"\n },\n };\n this.showTooltip = this.toggleTooltip.bind(this, true);\n this.hideTooltip = this.toggleTooltip.bind(this, false);\n }\n\n toggleTooltip = tooltipState => {\n this.setState({\n show: tooltipState\n });\n };\n\n render() {\n const { children, text, ...rest } = this.props;\n const { show } = this.state;\n const { visible, tooltip, tooltipArrow } = this.style;\n const showTooltip = show ? visible : {};\n return (\n <div>\n <div style={{ ...tooltip, ...showTooltip }}>\n {text}\n <span style={tooltipArrow}/>\n </div>\n <div {...rest} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>\n {children}\n </div>\n </div>\n );\n }\n}\n```",
|
||||
"```css\n.tooltip {\n position: relative;\n background: rgba(0, 0, 0, 0.7);\n color: white;\n visibility: hidden;\n padding: 5px;\n border-radius: 5px;\n}\n.tooltip-arrow {\n position: absolute;\n top: 100%;\n left: 50%;\n border-width: 5px;\n border-style: solid;\n border-color: rgba(0, 0, 0, 0.7) transparent transparent;\n}\n```",
|
||||
"```jsx\nfunction Tooltip({ children, text, ...rest }) {\n const [show, setShow] = React.useState(false);\n\n return (\n <div>\n <div className=\"tooltip\" style={show ? { visibility: \"visible\" } : {}}>\n {text}\n <span className=\"tooltip-arrow\" />\n </div>\n <div\n {...rest}\n onMouseEnter={() => setShow(true)}\n onMouseLeave={() => setShow(false)}\n >\n {children}\n </div>\n </div>\n );\n}\n```",
|
||||
"```jsx\n ReactDOM.render(\n <Tooltip text='Simple tooltip'>\n <button>Hover me!</button>\n </Tooltip>,\n document.getElementById('root')\n );\n```"
|
||||
],
|
||||
"expertise": 1,
|
||||
|
||||
@ -2,67 +2,47 @@
|
||||
|
||||
Renders a tooltip component.
|
||||
|
||||
Set the `state` of the component to `show: false` initially, define an object, `style`, to hold the styles for individual components and their states.
|
||||
Create a method, `toggleTooltip`, which uses `this.setState` to change the state's `show` property from `true` to `false` and vice versa.
|
||||
Bind `showTooltip` and `hideTooltip` to the component's context with the respective values of `true` and `false`.
|
||||
In the `render()` method, compute if the tooltip should be shown or hidden, render the content of the tooltip and bind the `onMouseEnter` and `onMouseLeave` events to `showTooltip` and `hideTooltip` respectively.
|
||||
Use the `React.useState()` hook to create the `show` variable and initialize it to `false`.
|
||||
Return a `<div>` element that contains the `<div>` that will be the tooltip and the `children` passed to the component.
|
||||
Handle the `onMouseEnter` and `onMouseLeave` methods, by altering the value of the `show` variable.
|
||||
|
||||
```css
|
||||
.tooltip {
|
||||
position: relative;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
visibility: hidden;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.tooltip-arrow {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: rgba(0, 0, 0, 0.7) transparent transparent;
|
||||
}
|
||||
```
|
||||
```jsx
|
||||
class Tooltip extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
show: false
|
||||
};
|
||||
this.style = {
|
||||
tooltip: {
|
||||
position: 'relative',
|
||||
backgroundColor: "rgba(0,0,0,0.7)",
|
||||
color: "white",
|
||||
visibility: "hidden",
|
||||
width: "fit-content",
|
||||
padding: 5,
|
||||
borderRadius: 5
|
||||
},
|
||||
tooltipArrow: {
|
||||
position: 'absolute',
|
||||
top: '100%',
|
||||
left: '50%',
|
||||
borderWidth: 5,
|
||||
borderStyle: 'solid',
|
||||
borderColor: "rgba(0,0,0,0.7) transparent transparent",
|
||||
},
|
||||
visible: {
|
||||
visibility: "visible"
|
||||
},
|
||||
};
|
||||
this.showTooltip = this.toggleTooltip.bind(this, true);
|
||||
this.hideTooltip = this.toggleTooltip.bind(this, false);
|
||||
}
|
||||
function Tooltip({ children, text, ...rest }) {
|
||||
const [show, setShow] = React.useState(false);
|
||||
|
||||
toggleTooltip = tooltipState => {
|
||||
this.setState({
|
||||
show: tooltipState
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { children, text, ...rest } = this.props;
|
||||
const { show } = this.state;
|
||||
const { visible, tooltip, tooltipArrow } = this.style;
|
||||
const showTooltip = show ? visible : {};
|
||||
return (
|
||||
<div>
|
||||
<div style={{ ...tooltip, ...showTooltip }}>
|
||||
{text}
|
||||
<span style={tooltipArrow}/>
|
||||
</div>
|
||||
<div {...rest} onMouseEnter={this.showTooltip} onMouseLeave={this.hideTooltip}>
|
||||
{children}
|
||||
</div>
|
||||
return (
|
||||
<div>
|
||||
<div className="tooltip" style={show ? { visibility: "visible" } : {}}>
|
||||
{text}
|
||||
<span className="tooltip-arrow" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div
|
||||
{...rest}
|
||||
onMouseEnter={() => setShow(true)}
|
||||
onMouseLeave={() => setShow(false)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
Reference in New Issue
Block a user