Im trying to make react-speech-recognition write inside a text-field but for some reason it wont work. I think it has to do with the last line.
import React from 'react';
import Button from '#material-ui/core/Button';
import Checkbox from '#material-ui/core/Checkbox';
import CircularProgress from '#material-ui/core/CircularProgress';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Grid from '#material-ui/core/Grid';
import TextField from '#material-ui/core/TextField';
import Paper from '#material-ui/core/Paper';
import InputLabel from '#material-ui/core/InputLabel';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'
// import EventIcon from '#material-ui/icons/Event';
import SearchIcon from '#material-ui/icons/Search';
// import TodayIcon from '#material-ui/icons/Today';
import InputUnstyled from '#mui/base/InputUnstyled';
const Dictaphone = () => {
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition
} = useSpeechRecognition();
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesn't support speech recognition.</span>;
}
return (
<div>
<p>Microphone: {listening ? 'on' : 'off'}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
);
};
function updateInput(ish) {
document.setSearchField = "Rendering";
}
function SearchForm({ runSearch, setSearchField, setAuthorField, setVenue, setBeginDate, setEndDate, setShowGraph, show_loading }) {
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition
} = useSpeechRecognition();
return (
<Grid container spacing={2}>
<Grid item xs={1} />
<Grid item xs={10}>
<Paper elevation={2}>
<div className="search-body">
<form onSubmit={runSearch}>
<Grid container spacing={2}>
<Grid item xs={12}>
<div>
<p>Microphone: {listening ? 'on' : 'off'}</p>
<button onClick={SpeechRecognition.startListening}>Start</button>
<button onClick={SpeechRecognition.stopListening}>Stop</button>
<button onClick={resetTranscript}>Reset</button>
<p>{transcript}</p>
</div>
<TextField
id="busca" label="Palavras-chave *"
type='text'
placeholder={transcript}
name='q'
variant="outlined"
fullWidth
InputProps={{
endAdornment: <SearchIcon />
}}
InputLabelProps={{
shrink: true
}}
onChange={setSearchField} />
I tried using value={transcript} in the text-field but it only will work after i write something after it. Example: i say "hello", it will write it in the text-field but it wont actually send "hello" until i write something with the keyboard after like "1". then it will send "hello1".
<TextField
id="busca" label="Palavras-chave *"
type='text'
value={transcript}
placeholder={transcript}
name='q'
variant="outlined"
fullWidth
InputProps={{
endAdornment: <SearchIcon />
}}
InputLabelProps={{
shrink: true
}}
onChange={setSearchField} />
I think it might work if you replace TextField with textarea including value={transcript} for the same.
Related
I'm working on a project using React for GUI, electron and realm.
Everything works fine until I try to Import a "component" from the other .js file
Here is my App.js import section:
import logo from './logo.svg';
import './App.css';
import * as Realm from 'realm';
import Avatar from '#mui/material/Avatar';
import Button from '#mui/material/Button';
import CssBaseline from '#mui/material/CssBaseline';
import TextField from '#mui/material/TextField';
import FormControlLabel from '#mui/material/FormControlLabel';
import Checkbox from '#mui/material/Checkbox';
import Link from '#mui/material/Link';
import Grid from '#mui/material/Grid';
import Box from '#mui/material/Box';
import LockOutlinedIcon from '#mui/icons-material/LockOutlined';
import Typography from '#mui/material/Typography';
import Container from '#mui/material/Container';
import { createTheme, ThemeProvider } from '#mui/material/styles';
import Signin from './Signin';
and my Signin.js file look likes this :
import Avatar from '#mui/material/Avatar';
import Button from '#mui/material/Button';
import CssBaseline from '#mui/material/CssBaseline';
import TextField from '#mui/material/TextField';
import FormControlLabel from '#mui/material/FormControlLabel';
import Checkbox from '#mui/material/Checkbox';
import Link from '#mui/material/Link';
import Grid from '#mui/material/Grid';
import Box from '#mui/material/Box';
import LockOutlinedIcon from '#mui/icons-material/LockOutlined';
import Typography from '#mui/material/Typography';
import Container from '#mui/material/Container';
import { createTheme, ThemeProvider } from '#mui/material/styles';
function Copyright(props) {
return (
<Typography variant="body2" color="text.secondary" align="center" {...props}>
{'Copyright © '}
<Link color="inherit" href="https://mui.com/">
Your Website
</Link>{' '}
{new Date().getFullYear()}
{'.'}
</Typography>
);
}
const theme = createTheme();
export default function SignIn() {
const handleSubmit = (event) => {
event.preventDefault();
const data = new FormData(event.currentTarget);
// eslint-disable-next-line no-console
console.log({
email: data.get('email'),
password: data.get('password'),
});
};
return (
<ThemeProvider theme={theme}>
<Container component="main" maxWidth="xs">
<CssBaseline />
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Avatar sx={{ m: 1, bgcolor: 'secondary.main' }}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign in
</Typography>
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField
margin="normal"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
autoFocus
/>
<TextField
margin="normal"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
<FormControlLabel
control={<Checkbox value="remember" color="primary" />}
label="Remember me"
/>
<Button
type="submit"
fullWidth
variant="contained"
sx={{ mt: 3, mb: 2 }}
>
Sign In
</Button>
<Grid container>
<Grid item xs>
<Link href="#" variant="body2">
Forgot password?
</Link>
</Grid>
<Grid item>
<Link href="#" variant="body2">
{"Don't have an account? Sign Up"}
</Link>
</Grid>
</Grid>
</Box>
</Box>
<Copyright sx={{ mt: 8, mb: 4 }} />
</Container>
</ThemeProvider>
);
}
here is the error I get in the BrowserWindow console :
Uncaught Error: require() of ES Module C:\Users\valco\Documents\GATO\Main\my_electron_react_application\node_modules\#babel\runtime\helpers\esm\defineProperty.js from C:\Users\valco\Documents\GATO\Main\my_electron_react_application\build\index.html not supported.
Instead change the require of defineProperty.js in C:\Users\valco\Documents\GATO\Main\my_electron_react_application\build\index.html to a dynamic import() which is available in all CommonJS modules.
at __node_internal_captureLargerStackTrace (node:internal/errors:464)
at new NodeError (node:internal/errors:371)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1144)
at Module.load (node:internal/modules/cjs/loader:988)
at Module._load (node:internal/modules/cjs/loader:829)
at Function.c._load (node:electron/js2c/asar_bundle:5)
at Function.o._load (node:electron/js2c/renderer_init:33)
at Module.require (node:internal/modules/cjs/loader:1012)
at require (node:internal/modules/cjs/helpers:94)
at Object.<anonymous> (defineProperty":1)
at l (index.html:1)
at Module.<anonymous> (main.e3312a17.chunk.js:1)
at l (index.html:1)
at r (index.html:1)
at Array.t [as push] (index.html:1)
at main.e3312a17.chunk.js:1
I know it may have something to do with ES6 and require, or node version, or node-fetch,
Because of realm, I cant just start the script I have to go through a CRADO build before.
When I dont try to import Signin, everything works just fine but as soon as I try to import it... I get this error.
I found the why of the problem :
My app.js is based on React-Native while the Signin.js is React.
It seems like Realm cant work with React..?
I am implementing a form and download the text input from the form as a PDF. But i am facing issue while implementing the Next and submit button which can route to my PDF component which are having option to download the form. Can anyone please help me here to resolve this :)
Following is my component named "Map" with Next Button which should Route to the PDF component:
enter code here
import React , { Component} from 'react';
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import TextField from '#material-ui/core/TextField';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Checkbox from '#material-ui/core/Checkbox';
import Link from '#material-ui/core/Link';
import Grid from '#material-ui/core/Grid';
import Typography from '#material-ui/core/Typography';
import { withStyles } from '#material-ui/core/styles';
import Container from '#material-ui/core/Container';
import PDF from './PDF';
const useStyles = (theme) => ({
paper: {
marginTop: "theme.spacing(8)",
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: 'spacing(1)',
backgroundColor: 'palette.secondary.main',
alignItems:'center'
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: 'spacing(3)',
},
submit: {
margin: 'spacing(3, 0, 2)'
},
});
class Map extends React.Component {
userData;
constructor (props) {
super(props);
this.onChangefirstName = this.onChangefirstName.bind(this);
this.onChangelastName = this.onChangelastName.bind(this);
this.onChangeEmail = this.onChangeEmail.bind(this);
this.onChangePhone = this.onChangePhone.bind(this);
this.onSubmit = this.onSubmit.bind(this);
this.state = {
fname: '',
lname:'',
email: '',
phone: '',
postSubmitted:false
}
}
// Form event
onChangefirstName(e) {
this.setState({ fname: e.target.value})
}
onChangelastName(e){
this.setState({lname: e.target.value})
}
onChangeEmail(e){
this.setState({email: e.target.value})
}
onChangePhone(e){
this.setState({phone: e.target.value})
}
onSubmit(e){
e.preventDefault()
}
//React Lifecycle
componentDidMount(){
this.userData = JSON.parse(localStorage.getItem('user'));
if (localStorage.getItem('user')) {
this.setState({
fname: this.userData.fname,
lname: this.userData.lname,
email: this.userData.email,
phone: this.userData.phone
})
} else {
this.setState({
fname: '',
lname: '',
email: '',
phone: ''
})
}
}
componentWillUpdate(nextProps, nextState){
localStorage.setItem('user', JSON.stringify(nextState));
}
//Validation
submitPost = e => {
if (!this.state.fname || !this.state.lname || !this.state.email) {
alert(" All fields are required")
e.preventDefault();
} else {
this.setState({
postSubmitted: true
});
}
}
render(){
const {classes} = this.props;
return (
<>
{
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}><br></br>
<Typography component="h1" variant="h5">
Tell About Yourself
</Typography> <br></br>
<form className={classes.form} onSubmit={this.onSubmit}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
autoComplete="fname"
name="firstName"
variant="outlined"
required
fullWidth
id="firstName"
label="First Name"
autoFocus
value={this.state.fname}
onChange={this.onChangefirstName}
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
required
fullWidth
id="lastName"
label="Last Name"
name="lastName"
autoComplete="lname"
value={this.state.lname}
onChange={this.onChangelastName}
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="email"
label="Email Address"
name="email"
value={this.state.email}
onChange={this.onChangeEmail}
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
name="phone"
label="Phone Number"
type="phone"
id="phone"
autoComplete="phone"
value={this.state.phone}
onChange={this.onChangePhone}
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox value="allowExtraEmails" color="primary" /> }
label="Your contact details will be shared with TØyen Unlimited"
alignItems='row'
/>
</Grid>
</Grid><br></br>
<Button
fullWidth
variant="contained"
color="secondary"
className={classes.submit}
component={Link}
to="/PDF"
>
Submit and Go to next
</Button>
</form>
</div>
</Container>
}
</>
);
}
}
export default withStyles(useStyles, {withTheme:true}) (Map)
Following is my App.js component where i have defined Route property:
import './App.css';
import { makeStyles} from '#material-ui/core/styles'
import { BrowserRouter as Router, Route } from "react-router-dom";
import NavBar from './Components/NavBar';
import Home from './Components/Home';
import About from './Components/About';
import Map from './Components/Map';
import Footer from './Components/Footer';
import PDF from './Components/PDF';
const styles = makeStyles({
wrapper: {
width: "65%",
margin: "auto" ,
textAlign: "center",
},
bigSpace: {
marginTop: "5rem"
},
littleSpace: {
marginTop: "2.5rem"
},
title: {
color: "#314976",
font: "Italic"
}
})
function App() {
const classes = styles();
return (
<Router>
<div className="App">
<NavBar/>
<div className={classes.wrapper}>
<switch>
<Route exact path="/">
<Home/>
</Route>
<Route exact path="/About">
<About/>
</Route>
<Route exact path="/Map">
<Map/>
</Route>
<Route exact path="/PDF" >
<PDF/>
</Route>
</switch>
</div>
<div className={classes.bigSpace}>
<Footer/>
</div>
</div>
</Router>
);
}
export default App;
I think the issue here is that you're importing and using the Link component from Material-UI and not the Link component from react-router-dom.
import Link from '#material-ui/core/Link';
Material-UI Link
From what I can tell from the Material-UI Link component renders a normal anchor tag, i.e. to link out to external resources, not to routes within the app. In other words, the link isn't using the routing context to handle any navigation.
I believe the simplest resolution is to just import the react-router-dom Link component instead.
import { Link } from 'react-router-dom';
...
<Button
fullWidth
variant="contained"
color="secondary"
className={classes.submit}
component={Link}
to="/PDF"
>
Submit and Go to next
</Button>
I'm new to React/MUI.. I'm creating different components for now for a website, so the UI for now doesn't matter.
I'm facing this problem while trying to do a button to link me to the Sign Up page (Doing the same for Sign In):
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: ...
The following is my code:
SignUp.js
import React from 'react';
import Avatar from '#material-ui/core/Avatar';
import Button from '#material-ui/core/Button';
import CssBaseline from '#material-ui/core/CssBaseline';
import TextField from '#material-ui/core/TextField';
import FormControlLabel from '#material-ui/core/FormControlLabel';
import Checkbox from '#material-ui/core/Checkbox';
import Link from '#material-ui/core/Link';
import Grid from '#material-ui/core/Grid';
import Box from '#material-ui/core/Box';
import LockOutlinedIcon from '#material-ui/icons/LockOutlined';
import Typography from '#material-ui/core/Typography';
import { makeStyles } from '#material-ui/core/styles';
import Container from '#material-ui/core/Container';
const useStyles = makeStyles((theme) => ({
paper: {
marginTop: theme.spacing(8),
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
},
avatar: {
margin: theme.spacing(1),
backgroundColor: theme.palette.secondary.main,
},
form: {
width: '100%', // Fix IE 11 issue.
marginTop: theme.spacing(3),
},
submit: {
margin: theme.spacing(3, 0, 2),
},
}));
export default function SignUp() {
const classes = useStyles();
return (
<Container component="main" maxWidth="xs">
<CssBaseline />
<div className={classes.paper}>
<Avatar className={classes.avatar}>
<LockOutlinedIcon />
</Avatar>
<Typography component="h1" variant="h5">
Sign up
</Typography>
<form className={classes.form} noValidate>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField
autoComplete="fname"
name="firstName"
variant="outlined"
required
fullWidth
id="firstName"
label="First Name"
autoFocus
/>
</Grid>
<Grid item xs={12} sm={6}>
<TextField
variant="outlined"
required
fullWidth
id="lastName"
label="Last Name"
name="lastName"
autoComplete="lname"
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
id="email"
label="Email Address"
name="email"
autoComplete="email"
/>
</Grid>
<Grid item xs={12}>
<TextField
variant="outlined"
required
fullWidth
name="password"
label="Password"
type="password"
id="password"
autoComplete="current-password"
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={<Checkbox value="allowExtraEmails" color="primary" />}
label="I want to receive inspiration, marketing promotions and updates via email."
/>
</Grid>
</Grid>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign Up
</Button>
<Grid container justify="flex-end">
<Grid item>
<Link href="#" variant="body2">
Already have an account? Sign in
</Link>
</Grid>
</Grid>
</form>
</div>
<Box mt={5}>
<Copyright />
</Box>
</Container>
);
}
App.js
import React from 'react';
import Container from '#material-ui/core/Container';
import Typography from '#material-ui/core/Typography';
import SignUp from './sign-up/SignUp.js';
import SignIn from './sign-in/SignIn.js';
import Box from '#material-ui/core/Box';
import Link from '#material-ui/core/Link';
import { Button, Paper } from '#material-ui/core';
export default function App() {
return (
<div>
<Container maxWidth="sm">
<Box my={4}>
<Typography variant="h4" component="h1" gutterBottom>
Creating a website!
</Typography>
<ProTip />
<button onClick={SignUp}>
Click me!
</button>
<SignIn />
<Copyright />
</Box>
</Container>
</div>
);
}
How do I properly convert in this case?
You're trying to call a React component as an event handler:
<button onClick={SignUp}>
That will not work. Instead you can for example create a flag, set it to true in the onClick handler and then render SignUp based on this flag.
const [showSignUp, setShowSignUp]= React.useState(false)
...
<button onClick={()=>setShowSignUp(s=>!s)}>Click me!</button>
{showSignUp ? <SignUp /> : <SignIn />}
I am using material-UI for my project and I want to use Dialog but Dialog not working without any error. I am using react with material design. I try many things but still not working. I am using react with material design.i want to open form in Dialog.
App.tsx
import React from "react";
import logo from "./logo.svg";
import "./style.scss";
import {
Button,
FormControl,
TextField,
Grid,
Container
} from "#material-ui/core";
import CreateDialog from "./Components/UserLoginSignUp/Signup";
function App() {
return (
<Container>
<div className="App">
<CreateDialog />
sdfsdf
</div>
</Container>
);
}
export default App;
Signup.tsx
import React, { Fragment } from "react";
import {
Button,
Dialog,
DialogActions,
DialogContent,
DialogContentText,
DialogTitle
} from "#material-ui/core";
import { FormControl, TextField, Grid, Container } from "#material-ui/core";
import { Component } from "react";
export default class extends Component {
state = {
open: false
};
handleToggle = () => {
this.setState({
open: !this.state.open
});
};
render() {
const { open } = this.state;
return (
<Fragment>
<Button>add</Button>
<Dialog aria-labelledby="form-dialog-title" open={open}>
<DialogTitle id="form-dialog-title">Set backup account</DialogTitle>
<DialogContent>
<DialogContentText>form</DialogContentText>
<Grid container spacing={3}>
<Grid item xs={12} sm={6} id="content_side_userLS">
<Grid>
{" "}
<h1>Signup</h1>
<p>
Invest with next-generation wealth building & investment
platform.
</p>
</Grid>
</Grid>
<Grid item xs={12} sm={6}>
<form noValidate autoComplete="off">
<FormControl className="input_field" fullWidth>
<TextField id="standard-basic" label="Full Name" />
</FormControl>
<FormControl className="input_field" fullWidth>
<TextField
id="standard-basic"
label="Enter Email/Mobile Number"
/>
</FormControl>
<FormControl className="input_field" fullWidth>
{" "}
<TextField id="standard-basic" label="Password" />
</FormControl>
<FormControl className="input_field" fullWidth>
{" "}
<Button variant="contained" color="primary">
{" "}
CONTINUE{" "}
</Button>
</FormControl>
</form>
</Grid>
</Grid>
</DialogContent>
<DialogActions>
<Button>Subscribe</Button>
</DialogActions>
</Dialog>
</Fragment>
);
}
}
You didn't bind the handler function handleToggle to the button.
<Button onClick={this.handleToggle}>add</Button>
You need an onClose callback handler to close the dialog, and it seems you can share the same handler with onClick.
handler = () => {
this.setState({
open: !this.state.open
});
};
<Dialog
aria-labelledby="form-dialog-title"
open={open}
onClose={this.handler}
>
Try it online:
I have a simple react code. There is a material-UI Textfield.
When I click in the text box to enter data, the screen shakes. After entering data, I click outside, the box screen shakes. Do help me resolve this screen shaking. Thanks so much.
import Grid from '#material-ui/core/Grid';
import TextField from '#material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
const Login = props => {
return (
<div>
<Grid container spacing={2} justify="center">
<Grid item xs={12} container justify="center" spacing={2}>
<Grid item xs={3}>
<TextField
label="fd"
variant="outlined"
fullWidth
>
</TextField>
</Grid>
</Grid>
</Grid>
</div>
)
}
export default Login;
Just set onChange attributes of the Text Fields as follows and the shaking will go away.
import React, { useState } from 'react';
import Grid from '#material-ui/core/Grid';
import TextField from '#material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
const Login = props => {
const [name,setName] = useState("")
return (
<div>
<Grid container spacing={2} justify="center">
<Grid item xs={12} container justify="center" spacing={2}>
<Grid item xs={3}>
<TextField
label="fd"
variant="outlined"
fullWidth
onChange={e => setName(e.target.value)}
/>
</Grid>
</Grid>
</Grid>
</div>
)
}
export default Login;