Skip to content

Instantly share code, notes, and snippets.

View koss-lebedev's full-sized avatar

Konstantin koss-lebedev

View GitHub Profile
View prop-alias-fix.tsx
type Props = HTMLAttributes<HTMLInputElement>
const CustomInput = ({ onChange, ...props }: Props) => {
const handleChange = (event) => {
/// ... some logic
onChange(event)
}
return <input {...props} onChange={handleChange} />
}
View prop-alias.tsx
type Props = HTMLAttributes<HTMLInputElement> & {
onUpdate: (value: string) => void
}
const CustomInput = ({ onUpdate, ...props }: Props) => {
const onChange = (event) => {
/// ... some logic
onUpdate(event.target.value)
}
View incomplete-props-fix.tsx
type Props = InputHTMLAttributes<HTMLInputElement>
const CustomInput = (props: Props) => {
// ...some additional logic
return <input {...props} />
}
View incomplete-props.tsx
type Props = { value: string; onChange: () => void }
const CustomInput = ({ value, onChange }: Props) => {
// ...some additional logic
return <input value={value} onChange={onChange} />
}
View char-count-input.tsx
type Props = InputHTMLAttributes<HTMLInputElement>
const Input = (props: Props) => { /* ... */ }
const CharCountInput = (props: Props) => {
return (
<div>
<Input {...props} />
<span>Char count: {props.value.length}</span>
</div>
View styled-components.tsx
import styled from 'styled-components'
const Button = (props) => { /* ... */ }
const StyledButton = styled(Button)`
border: 1px solid black;
border-radius: 5px;
`
const App = () => {
View message-4.tsx
const TextMessage = ({ text }) => {
return (
<div>
<p>{text}</p>
</div>
)
}
const ImageMessage = ({ text, imageUrl }) => {
return (
View message-3.tsx
const Message = ({ text, imageUrl, audioUrl }) => {
if (audioUrl) {
return (
<div>
<audio controls>
<source src={audioUrl} />
</audio>
</div>
)
}
View message-2.tsx
const Message = ({ text, imageUrl }) => {
return (
<div>
{imageUrl && <img src={imageUrl} />}
{text && <p>{text}</p>}
</div>
)
}
View message-1.tsx
const Message = ({ text }) => {
return (
<div>
<p>{text}</p>
</div>
)
}