score:46
html supports data-* attribute type for custom attributes. you can read about it more here.
definition and usage the data-* attributes is used to store custom data private to the page or application.
the data-* attributes gives us the ability to embed custom data attributes on all html elements.
the stored (custom) data can then be used in the page's javascript to create a more engaging user experience (without any ajax calls or server-side database queries).
the data-* attributes consist of two parts:
- the attribute name should not contain any uppercase letters, and must be at least one character long after the prefix "data-"
- the attribute value can be any string
note: custom attributes prefixed with "data-" will be completely ignored by the user agent.
rather than just using size="a4"
you can use data-size="a4"
example
<div classname="page" data-size="a4">
// ....
</div>
score:5
not entirely related, but say you want to accept extra attributes in your custom component, using the spread operator like ...rest
. hereĀ“s how you do it:
interface props{
icon?: string;
}
type button = props & react.htmlprops<htmlbuttonelement> & react.htmlattributes<htmlbuttonelement>;
function button({
icon,
...rest
}: button) {
return (
<button
{...rest}
>
{icon && <span>{icon}</span>}
{children}
</button>
}
score:7
if you are using styled-components, you can do it even simplier:
const app = props => {
return <styleddiv version={2.0}>my custom div</styleddiv>
}
type custom = {
version?: number
}
const styleddiv = styled.div<custom>`
// styles
`
score:15
react type definition file (by default - index.d.ts
when staring with create-react-app
) contain list of all the standard html elements, as well as known attributes.
in order to allow custom html attributes, you need to define it's typing.
do that by expanding htmlattributes
interface:
declare module 'react' {
interface htmlattributes<t> extends ariaattributes, domattributes<t> {
// extends react's htmlattributes
custom?: string;
}
}
possibly related question:
how do i add attributes to existing html elements in typescript/jsx?
Source: stackoverflow.com
Related Query
- Property does not exist on type 'DetailedHTMLProps, HTMLDivElement>' with React 16
- React with Typescript: Property 'push' does not exist on type 'History'
- TS2339: Property 'focus' does not exist on type '{}'. with React typescript
- React Hooks with typescript: Property 'data' does not exist on type
- React Custom Hook with Context and Typescript: Property 'map' does not exist on type 'Option'
- React with TypeScript - Property 'value' does not exist on type 'EventTarget'
- React useRef with Typescript: Property 'playbackRate' does not exist on type 'HTMLAudioElement'.ts(2339)
- Generics error with forwardRef: Property 'ref' does not exist on type 'IntrinsicAttributes'
- Property 'current' does not exist on type '((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement>'
- State using React Typescript: Property does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes
- Property 'value' does not exist on type 'HTMLElement' in React Testing Library
- react hooks and typescript - Property '***' does not exist on type 'never'
- Property 'auth' does not exist on type 'FirebaseApp' on REACT
- Property 'name' does not exist on type 'EventTarget' - React + TypeScript
- Property does not exist on React component when defined with recompose
- Transpiling error in Typescript with React: Property does not exist on type 'IntrinsicAttributes'
- Emotion theming with TypeScript: Property 'X' does not exist on type 'object'. ts(2339)
- React Custom Hook with Typescript Type error "Property 'x' does not exist on type 'interface | (({ target }: any) => void)'.ts(2339)"
- React Typescript: property 'body' does not exist type 'DefaultTheme'
- Typescript Property '' does not exist on type 'never'. in React NodeJs stack
- Property 'location' does not exist on type 'Readonly<{}> - React Router and Typescript
- React Typescript property does not exist on type / IntrinsicAttributes & IntrinsicClassAttributes
- React & Typescript: Property 'id' does not exist on type 'number'
- Property 'background' does not exist on type '{}' - React Router modal
- React Typescript Custom Hooks: Property 'prop_name' does not exist on type '{}'
- TypeScript Property 'value' does not exist on type 'HTMLElement'. React Jest Testing
- Property does not exist on type error with Union Types in Typescript Reac + Redux
- React Antd Modal Property 'children' does not exist on type 'IntrinsicAttributes & ModalProps'
- React - Property does not exist on type IntrinsicAttributes
- Property does not exist on state - Using React Router Hooks with TypeScript
More Query from same tag
- Passing a prop to a child from parent with React and Gatsby
- Remove gap in Highcharts column chart from null value from JSON file in React
- Cross Cutting Concept in react life cycle methods
- re-render as soon as the state is changed
- Set state from child call back
- How to route someone to a page when they click a button: React
- How to customize Material-UI-Pickers to have generic months/days
- Change the size of a checkbox with Material UI
- How to display the last two index data of an array as a single data together?
- Manipulating dom elements dynamically in react?
- How to display the route on ReactGoogleMap?
- Removing a className using ReactJS useState
- How can I change mysql db query?
- What does JSX stand for?
- How to avoid redirecting twice (React)?
- react admin pagination is not working expected
- Encountered two children with the same key Error
- What is the difference between React component instance property and state property?
- React Table: resetting filters programmatically
- How to decrement amount after form submit in node js
- React select dropdown not updating on fetch
- You should not use Route outside a Router after use of withRouter
- ReactJS nested data structuring
- JSLint is throwing an Error - Expected an assignment or function call and instead saw an expression
- Is there a way to work with an Object in Object typescript?
- How to update state by useEffect in React?
- InAppBrowser not opening in Ionic React App
- Module not found: Can't resolve 'react-linkedin-login-oauth2'
- How to add function to "X" icon in Material UI Searchbar?
- Having trouble displaying values retrieved from multiple APIs to Ag-Grid rows (React)