core/kind

Provides the core/kindcore/kind.kind method to create components

Import Usage

import kind from '@enact/core/kind';

Members

kind   Function

kind( config ) → Component(Props)

Creates a new component with some helpful declarative syntactic sugar.

Example:

import css from './Button.module.less';
const Button = kind({
	name: 'Button',
	// Return a functional component
	functional: true,
	// expect color and onClick properties but neither required
	propTypes: {
		color: PropTypes.string
	},
	// if no color is provided, it'll be green
	defaultProps: {
		color: 'green'
	},
	// expect backgroundColor via context
	contextType: React.createContext({ backgroundColor }),
	// configure styles with the static className to merge with user className
	styles: {
		// include the CSS modules map so 'button' can be resolved to the local name
		css,
		className: 'button'
	},
	// add event handlers that are cached between calls to prevent recreating each call. Any
	// handlers are added to the props passed to `render()`.  See core/handle.
	handlers: {
		onKeyDown: (evt, props) => { .... }
	},
	// add some computed properties, these are added to props passed to `render()`
	computed: {
		// border color will be the color prepended by 'light'
		borderColor: ({color}) => 'light' + color,
		// background color will be the contextual background color if specified
		color: ({color}, context) => context.backgroundColor || color
	},
	// Render the thing, already!
	render: ({color, borderColor, children, ...rest}) => (
		<button
			{...rest}
			style={{backgroundColor: color, borderColor}}
		>
			{children}
		</button>
	)
});

1 Param

config KindConfig

Component configuration

Returns

 Component(Props)

Component

Type Definitions

ComputedPropFunction   Function

ComputedPropFunction(props, context)

→ any

2 Params

props Object(string, any)

context Object(string, any)

Returns

 any

any

HandlerFunction   Function

HandlerFunction(event, props, context)

3 Params

event any

props Object(string, any)

context Object(string, any)

Returns

KindConfig   Object

Optional • name

String

The name of the component

---

Optional • functional

Boolean

Boolean controlling whether the returned component should be a functional component

---

Optional • propTypes

Object(string, Function)

Specifies expected props

---

Optional • defaultProps

Object(string, any)

Sets the default props

---

Optional • contextType

Object

Specifies context type

---

Optional • styles

StylesBlock

Configures styles with the static className to merge with user className

---

Optional • handlers

Object(string, HandlerFunction)

Adds event handlers that are cached between calls to prevent recreating each call. Any handlers are added to the props passed to render(). See core/handlecore/handle.handle.

---

Optional • computed

Object(string, ComputedPropFunction)

Adds some computed properties, these are added to props passed to render()

---

Required Property • render

RenderFunction

The render function

RenderFunction   Function

RenderFunction(props, context)

→ any

2 Params

props Object(string, any)

context Object(string, any)

Returns

 any

React.Element|null

StylesBlock   Object

Configuration for CSS class name mapping

Required Property • css

Object(string, string)

The CSS of the component

---

Optional • className

String

The className of the component

---

Optional • publicClassNames

Boolean | String | Array(String)

Specifies which class names are overridable. If this value is true, all the class names of the component CSS will become public.