Compose the props of components.
This library contains modules on a per framework basis, but implementation signatures are essentially identical in theory.
Create the Composed
instance. Basically just a component with the Composed
methods on it, which create new components.
This is identical to how styled-components
.attrs
works.
Get an existing component and add the Composed methods to it.
import composed from "@virtual-props/composed/<framework>"
const Component = composed((props: { your?: "props", go: string }) => <div>{props.go}</div>)
function App() {
return <Component go="here">
}
import composed from "@virtual-props/composed/<framework>"
const Component = composed['div'] && composed.div
function App() {
return <Component>Here!</Component>
}
Once an instance is constructed, you can use the following methods.
The most foundational function. There's no magic here. Components are functions and they're Contravariant.
import composed from "@virtual-props/composed/<framework>"
const Component = composed.input.contramap<{ variant: string }>(props => ({type: props.variant}))
function App() {
return <Component variant="number">
}
Works exactly just like .attrs()
from styled-components
.
import composed from "@virtual-props/composed/<framework>"
const Component = composed.input.attrs<{ variant: string }>(props => ({ type: props.variant }))
function App() {
return <Component variant="number" value="2"/>
}
import composed from "@virtual-props/composed/<framework>"
const Component = composed.input.attrs(({ type: "number" }))
function App() {
return <Component value="2"/>
}
import composed from "@virtual-props/composed/<framework>"
const Component = composed.input.attrs<{ variant: string }>(props => ({ type: props.variant }))
// type takes precedence over variant.
function App() {
return <Component variant="number" type="text" />
}
Works exactly similar to .attrs()
from styled-components
, but all the props in the return of the function from the user:
They can't add stuff.
import composed from "@virtual-props/composed/<framework>"
const Component = composed.input.overrides<{ variant: string }>(props => ({ type: props.variant }))
function App() {
return <Component variant="number" value="2"/>
}
import composed from "@virtual-props/composed/<framework>"
const Component = composed.input.overrides(({ type: "number" }))
function App() {
return <Component value="2"/>
}