Using without JSX forces to pass down all props

[owais]

Trying to use this lib with typescript but without using JSX forces to pass down all defined props unlike with JSX. Unless this is a bug in typescript or some tooling, components should define default values or make the props optional if they are not truly required. That is how it seems to work with JSX.

import React, {Component} from 'react';
import h from 'react-hyperscript';

import TopAppBar from '@material/react-top-app-bar';
import MaterialIcon from '@material/react-material-icon';

class App extends Component {
  render() {
    return (
      h('div',
        h(TopAppBar, {
          title: 'Pro App',
          navigationIcon: h(MaterialIcon, {icon: 'menu', onClick: () => console.log('click')}),
          actionItems: [h(MaterialIcon, {key: 'item', icon: 'bookmark'})]
        })
      )
    )
  }
}

/app/src/App.tsx
Type error: Argument of type '{ title: string; navigationIcon: any; actionItems: any[]; }' is not assignable to parameter of type 'Props'.
  Type '{ title: string; navigationIcon: any; actionItems: any[]; }' is missing the following properties from type 'TopAppBarProps': className, dense, fixed, prominent, and 3 more.  TS2345

[moog16]

hmm this seems to be an issue with top app bar...the props listed should be optional. The component comes with default props, which is why it was never an issue for us. I'm not sure why react-hyperscript doesn't pick up the default props.

Just opening this PR which should fix your issue. In the meantime as a workaround, can you merge your props with TopAppBar.defaultProps?
#587

[owais]

Thanks. I was testing on a toy-app/side-project so it's not urgent for me at all to use the workaround. Note that I only tested TopAppBar component with Typescript and React.createElement or hyperscript instead of JSX. Other components might have similar issues as well.

[moog16]

merged #587

[owais]

Thanks