@virtual-props/compose

Compose the props of components.

API

This library contains modules on a per framework basis, but implementation signatures are essentially identical in theory.

Constructors

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.

Function

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"> 
}

Index

import composed from "@virtual-props/composed/<framework>"


const Component = composed['div'] && composed.div

function App() {
    return <Component>Here!</Component>
}

Methods

Once an instance is constructed, you can use the following methods.

Contramap

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">
}

Attrs

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" />
}

Overrides

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"/>
}