I'm using the very basic version of React quill bot like below
import React,{useState} from 'react';
import TextEditor from '../common/TextEditor';
function PageEdit(props) {
const [value, setValue] = useState('This is the value intially');
console.log("value", value)
return (
<div className='horizontal--center' style={{width:"50vw"}}>
<TextEditor value={value} setValue={setValue}/>
</div>
);
}
export default PageEdit;
import React, { useState } from 'react';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
function TextEditor({value, setValue}) {
const modules = {
// #3 Add "image" to the toolbar
toolbar: [["bold", "italic", "image"]],
}
return (
<ReactQuill theme="snow" value={value} onChange={setValue} modules={modules} />
);
}
export default TextEditor;
I want to add an image at a specific point(where the cursor is active), using a button that calls an external api. Any way to achieve this?
Related
Hi I'm creating a Teams App and im having trouble implementing a DatePicker in one of my screen.
My basic test screen:
import React from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function TestScreen() {
let [selectedDate, setSelectedDate] = useState("");
return(
<div>
<h1>TEST SCREEN</h1>
<div>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
/>
</div>
</div>
)
}
the tab component:
import React from "react";
// https://fluentsite.z22.web.core.windows.net/quick-start
import { Provider, teamsTheme } from "#fluentui/react-northstar";
import { HashRouter as Router, Redirect, Route } from "react-router-dom";
import Tab from "./Tab";
import "./App.css";
import { useTeams } from "#microsoft/teamsfx-react";
import "bootstrap/dist/css/bootstrap.min.css"
import TestScreen from "./screens/test";
export default function App() {
const { theme } = useTeams({})[0];
return (
<Provider theme={theme || teamsTheme} styles={{ backgroundColor: "#eeeeee" }}>
<Router>
<TestScreen />
</Router>
</Provider>
);
}
[The error I get][1]
[1]: https://i.stack.imgur.com/Sc7cX.png
For those wondering, I fixed my issue replacing the by a simple . Not the solution i wanted to use at first but at least it's working fine. Might be a compatibility issue between Teams toolkit, React and some packages..
I see you haven't imported useState in your file. Also add current date as the default value of the selectedDate state. Try this
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
export default function TestScreen() {
let [selectedDate, setSelectedDate] = useState(new Date());
return(
<div>
<h1>TEST SCREEN</h1>
<div>
<DatePicker
selected={selectedDate}
onChange={date => setSelectedDate(date)}
/>
</div>
</div>
)
}
In case you're still not able to use it check if you're using an older version of react. Since hooks are supported in React 16.8.0 or higher.
I created a preloader in my react page using react-spinner and is working but it is not showing in full screen instead showing in the top left corner without being able to see it properly.
import React from "react";
import Header from "./components/Header";
import { Helmet } from "react-helmet";
import Sidebar from "./components/Sidebar";
import ClimbingBoxLoader from "react-spinners/ClimbingBoxLoader";
import { useState, useEffect } from "react";
import "./index.css";
const App = () => {
const [load, setLoaded] = useState(false);
useEffect(() => {
setLoaded(true);
setTimeout(() => {
setLoaded(false);
}, 8000);
}, []);
return (
<div className="container">
{load ? (
<ClimbingBoxLoader size={150} color={"#123abc"} loading={load} />
) : (
<div>
<div className="indexing">
<Header className="fixed" />
</div>
<div>
<Sidebar></Sidebar>
</div>
</div>
)}
</div>
);
};
export default App;
The problem is your size.
I did some tests here and see :
Test 1
Test 2
Change size to something like : 10
The loader will be shown automatically on the center of screen.
import React from 'react';
import ClimbingBoxLoader from '#bit/davidhu2000.react-spinners.climbing-box-loader';
export default (
<ClimbingBoxLoader size={10} color={"#123abc"} loading="true" />
)
See docs here.
I'm trying to toggle different color modes with a <Switch onChange={toggleColorMode}>. However, it's not really changing colors after the switch component changes state. I'm new to using Chakra UI for react, and I followed the instructions in the docs for Color Mode https://chakra-ui.com/docs/features/color-mode.
I updated my theme config and I passed the customTheme to ChakraProvider component in main App component.
import { extendTheme,ThemeConfig } from "#chakra-ui/react";
const config : ThemeConfig = {
initialColorMode:"light",
useSystemColorMode:true,
}
const customTheme = extendTheme({
fonts:{
heading:"Spartan",
},
config
})
export default customTheme;
import * as React from "react"
import {
ChakraProvider,
Box,
Text,
FormControl,
FormLabel,
Switch,
useColorMode,
useColorModeValue
} from "#chakra-ui/react"
import "#fontsource/spartan/700.css"
import customTheme from "./theme"
// First Theme
const darkSaturatedBlue = {
// main background
mainBackgroundColor:"hsl(222, 26%, 31%)",
// toggle background, keypad background
toggleKeybadBackgroundColor:"hsl(223, 31%, 20%)",
// screen background
screenBackgroundColor:"hsl(224, 36%, 15%)",
// Button digit colors
buttonDigitColor:"hsl(221, 14%, 31%)",
}
export default function App(){
const {toggleColorMode} = useColorMode();
const bg = useColorModeValue("red.500",darkSaturatedBlue.mainBackgroundColor);
const color = useColorModeValue("white","gray.800");
return (
<ChakraProvider theme={customTheme}>
<Box bg={bg} h="100vh" w="100vw" color={color}>
<Box mx="auto" w={["100%",375]}>
{/* Main App Container */}
.......
<Box>
<FormControl display="flex" alignItems="center">
<FormLabel htmlFor="theme-switch" mb="0" fontSize="9">
THEME
</FormLabel>
<Switch id="theme-switch" size="sm" onChange={toggleColorMode} />
</FormControl>
</Box>
......
</Box>
</Box>
</ChakraProvider>
);
}
The colors used are an example I set out initially to test the waters. Is there something I'm missing here?
For some reason, you can't change the color mode directly below the ChakraProvider, you have to do it in a component. For example this code would work:
// index.js
import Page from "./app"
import { ChakraProvider } from "#chakra-ui/react"
export default function App () {
return <ChakraProvider>
<Page />
</ChakraProvider>
}
// app.js
import { Button, useColorMode } from "#chakra-ui/react"
export default function Page () {
const { toggleColorMode } = useColorMode()
return <Button>Toggle</Button>
}
You could also merge these files:
// index.js
import { ChakraProvider, Button, useColorMode } from "#chakra-ui/react"
function Page () {
const { toggleColorMode } = useColorMode()
return <Button>Toggle</Button>
}
export default function App () {
return <ChakraProvider>
<Page />
</ChakraProvider>
}
I'm not sure of the details behind this, but I've encountered this issue, and this does fix it.
I am trying to create a custom hook to be able to open and close a pop-out menu with conditional rendering using style display: none and display:block. I think I understand how to share the state between the components (I can console log that and get that working) , but I can not figure out how to update the state using the hook.
I am certain that I have some fundamental misunderstanding here but if anyone can clarify what it is I am trying to achieve that would be awesome! I have tried to learn this for several nights and here is where I have got to.
This is the header of the pop out menu it only contains a close button at the moment
import React from 'react'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faWindowClose } from '#fortawesome/free-solid-svg-icons'
import useOpenCloseElementMenu from '../Hooks/openCloseElementMenu'
function ElementMenuHeader() {
const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();
return (
<div id="App-Close-Element-Menu-Container">
<button id="App-Close-Element-Menu"
onClick={() => setElementMenuOpenClose(false) }
>
<FontAwesomeIcon icon={faWindowClose} />
</button>
</div>
);
}
export default ElementMenuHeader
This is the pop out menu
import React from 'react';
import SizerGroup from '../Sizer/sizerGroup';
import './element-menu.css';
import ElementMenuHeader from './element-menu-header';
import TitleWithLine from './title-with-line';
import TypeSelector from './type-selector';
import TemplateSelector from './template-selector';
import useOpenCloseElementMenu from '../Hooks/openCloseElementMenu'
function Editor(props) {
const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();
console.log(elementMenuOpenClose);
return (
<div className="App-Element-Menu"
style={{display: elementMenuOpenClose ? 'block' : 'none' }}
>
<ElementMenuHeader />
<TitleWithLine title="Element size" />
<SizerGroup />
<TitleWithLine title="Elements" />
<TypeSelector />
<TitleWithLine title="Templates" />
<TemplateSelector />
</div>
);
}
export default Editor
This is the toolbar that has the open menu button
import React from 'react'
import Button from '../Button/button'
import { FontAwesomeIcon } from '#fortawesome/react-fontawesome'
import { faBoxes } from '#fortawesome/free-solid-svg-icons'
import './toolbar.css'
import useOpenCloseElementMenu from '../Hooks/openCloseElementMenu'
function Toolbar(props) {
const { toolbar_show_or_hide } = props
const elementMenuIcon = <FontAwesomeIcon icon={ faBoxes } />
const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();
const openEditor = setElementMenuOpenClose[true]
return (
<div className="App-Toolbar" style={{ display: toolbar_show_or_hide ? "flex" : "none" }} >
<Button
id="App-Open-Element-Menu-Button"
icon={ elementMenuIcon }
useToolTip={ true }
toolTipText="Elements menu. Select elements to populate the theme."
buttonFunction={ openEditor }
/>
</div>
)
}
export default Toolbar
This is the hook
import React, { useState } from 'react';
const useOpenCloseElementMenu = () => {
const [elementMenuOpenClose, setElementMenuOpenClose] = useState(false);
return { elementMenuOpenClose, setElementMenuOpenClose };
};
export default useOpenCloseElementMenu;
I feel you donot have to pass the hook in a separate function, useOpenCloseElementMenu, like you did.
Instead of importing the ../Hooks/openCloseElementMenu function thing,
I'd rather just call the hooks directly instead as
const [elementMenuOpenClose, setElementMenuOpenClose] = useState(false);
in the editor and toolbar component in place of const { elementMenuOpenClose, setElementMenuOpenClose } = useOpenCloseElementMenu();.
Also which component did you use the toolbar component if I may ask? Because I don't seem to see any of that here...It confusing where it got the toolbar_show... props from.
{I hope this helps cause that seem like the most obvious reason}
I'm fairly new to React and trying to create an App that when you search in the input box it filters out the wrong drivers and only presents you with the correct one. I'm trying to use hooks instead of class components. I have a working project in CodeSandBox: https://codesandbox.io/s/hungry-turing-2n2tj
I've looked at some other answers on stack overflow as well as reading the docs that the React Team has but it is all going above my head. Let me know if there is any more documentation that I can provide! Thanks in advance!
You are looking for something like this: https://codesandbox.io/s/distracted-frog-d5ocw
Basically pass the drivers to the list from the app component and filter it out based on the search term provided by the searchbox component
Your App.js:
import React from "react";
import "./styles.css";
import CardList from "./card-list";
import SearchBox from "./searchbox";
import allDrivers from "./drivers";
export default function App() {
const [drivers, setDrivers] = React.useState(allDrivers);
return (
<div className="App">
<h1>F1 Drivers</h1>
<SearchBox
onSearch={v => {
console.log(v);
if (!v) {
setDrivers(allDrivers);
return;
}
setDrivers(drivers.filter(d => d.name.toLowerCase().startsWith(v)));
}}
/>
<CardList drivers={drivers} />
</div>
);
}
your cardlist would look like
import React from "react";
import Card from "./Card";
function CardList(props) {
return (
<div className="card-list">
{props.drivers.map(createCard => (
<Card
key={createCard.id}
name={createCard.name}
imgURL={createCard.imgURL}
number={createCard.number}
team={createCard.team}
age={createCard.yearsOld.age}
country={createCard.country}
/>
))}
</div>
);
}
export default CardList;
and searchbox is simply
import React from "react";
import "./drivers";
function SearchBox(props) {
return (
<input
onChange={e => {
props.onSearch(e.target.value);
}}
type="text"
// value={props.value}
/>
);
}
export default SearchBox;