withUniwind with prop mapping

[pvinis]

Basically, with withUniwind we can use things that have style and use className on them.

But what about props like width or size? I would be nice to have a way to go from:

<Foo style={{ backgroundColor: "red" }} width={12} />

to

<StyledFoo className="bg-red-500 size-4" />

and have it work.

I think for now the only way is to do

<StyledFoo className="bg-red-500" widthClassName="size-4" />

which is pretty weird and verbose.

This with nativewind v5 preview is something like

const StyledFo = styled(Foo, {
	className: {
		target: "style",
		nativeStyleMapping: {
			width: "width",
			height: "height",
			color: "color",
		},
	},
})

and done.

We need something like that for uniwind too!

[Brentlok]

Actually we have a way to do this

const UniComp = withUniwind(Comp, {
    style: {
        fromClassName: 'className',
    },
    width: {
        fromClassName: 'className',
        styleProperty: 'width',
    },
})

[pvinis]

wow, very interesting. yes, that works.

I could not find it/understand it in the docs..

Also, width works. what if its a random thing? in this case size is the name of the prop, but could it be anything?

lenghtyLength: {
  fromClassName: "className",
  styleProperty: "width"
}

?

[Brentlok]

I could not find it/understand it in the docs..

I agree, we could add more examples on more advanced manual prop mapping

Also, width works. what if its a random thing? in this case size is the name of the prop, but could it be anything?

Syntax is the following:

• object key - name of the component prop you want to map. Example we want to map style

{
    style: {
        fromClassName: 'className'
    }
}

• fromClassname - is a name of added prop that will map to object key. Example - we want to map buttonStyle to buttonClassName

{
    buttonStyle: {
        fromClassName: 'buttonClassName'
    }
}

• styleProperty - optional prop, if set instead of passing all styles into the mapped prop you can pick single style property. Example - we want to map iconColor to iconClassName and pick only fill

{
    iconColor: {
        fromClassName: 'iconClassName',
        styleProperty: 'fill'
    }
}

[pvinis]

I see. you explained it better than the docs, you should copy paste this answer in there :D

Thank you for the responses. I'm doing a test migration from nativewind v5 to uniwind, and this is the last thing i need to make sure works.

[luixo]

@Brentlok
Just stumbled upon few use cases I have with Nativewind that are not obvious in Uniwind.
First, I want to pass multiple props to one style:

const TargetComponent = ({ buttonStyle, textStyle }) => {
  // Both Button and Icon are expecting ViewStyle / TextStyle objects
  return <Button style={buttonStyle}><Text style={textStyle}>My text</Text></Button>
}
const MappedComponent = withUniwind({
  textStyle: {
    fromClassName: 'className',
    // fontSize, fontWeight, textColor should go to textStyle
    styleProperties: ['fontSize', 'fontWeight', 'textColor']
  }
  buttonStyle: {
    fromClassName: 'className',
    // everything else should go to textStyle
  }
});
// There's a button with amber-500 background and red-500 text color
return <MappedComponent className="text-red-500 bg-amber-500" />

Then, I want to pass a value, not a style:

const TargetComponent = ({ iconFill }) => {
  // Icon is expecting `color="#000"`
  return <Icon color={iconFill} />
}
const MappedComponent = withUniwind({
  iconFill: {
    fromClassName: 'className',
    directPass: 'textColor'
  }
});
// Icon is filled with red-500
return <MappedComponent className="text-red-500" />

Then, I want to remap property:

const TargetComponent = ({ style }) => {
  // Icon is expecting `{ fill: <color> }`
  return <Icon style={style} />
}
const MappedComponent = withUniwind({
  style: {
    fromClassName: 'className',
    remapProperies: {
      textColor: 'fill'
    }
  }
});
// Icon is filled with red-500
return <MappedComponent className="text-red-500" />

Then, I want to have deep propertis:

const TargetComponent = ({ indicator: { style } }) => {
  // Indicator is expecting `{ text: <color> }`
  return <View><Indicator style={style} /></View>
}
const MappedComponent = withUniwind({
  'indicator.style': {
    fromClassName: 'className'
  }
});
// Indicator is filled with red-500
return <MappedComponent className="bg-red-500" />

Nativewind has all those cases sorted out (even in a type-safety way I guess).
It would be great for Uniwind to pick their types for that which would also make migration easier (that was the most tedious migration job for me so far)

[Brentlok]

Hi thanks for the feedback, here's my take on those cases:

const MappedComponent = withUniwind({
  textStyle: {
    fromClassName: 'className',
    // fontSize, fontWeight, textColor should go to textStyle
    styleProperties: ['fontSize', 'fontWeight', 'textColor']
  }
  buttonStyle: {
    fromClassName: 'className',
    // everything else should go to textStyle
  }
});

This looks like a rare case for me, and everything else should go to textStyle doesn't really look obvious for me. You can use useResolveClassName hook to resolve this case

---

const TargetComponent = ({ iconFill }) => {
  // Icon is expecting `color="#000"`
  return <Icon color={iconFill} />
}
const MappedComponent = withUniwind({
  iconFill: {
    fromClassName: 'className',
    directPass: 'textColor'
  }
});
// Icon is filled with red-500
return <MappedComponent className="text-red-500" />

In uniwind you can just do something like that, so I don't see any problem here. It's basically the same API

const MappedComponent = withUniwind({
  iconFill: {
    fromClassName: 'className',
    styleProperty: 'textColor'
  }
});

---

Other cases also look pretty unique to me, we don't really want to introduce more things to support for now, especially because we're planning some new major features for Q1 - like ScopedThemes, data attributes and more...
We may revisit this in the future though, I don't say that it will never land in the uniwind. Again thank you for your feedback and thanks for trying out uniwind!