Binding styleObject

I must past some styleObject to side component, like this:

let selectStyles = {
  container: () => ({
    "width": "230px"
  })
}

let make = () => <Component styles={selectStyles} />

How i do bind this type?

type selectStyles = {
  container: unit => ???
}

I think it’s stupid to write all css props, that i use here. Maybe rescript has a type library or a hack for that cases?

UPDATED
Need to bind this function:

/**
 * @param {Object} provided -- the component's default styles
 * @param {Object} state -- the component's current state e.g. `isFocused`
 * @returns {Object}
 */
function styleFn(provided, state) {
  return { ...provided, color: state.isFocused ? 'blue' : 'red' };
}

bs-css-dom is a typed interface to ReactDOM.Style.t, if you want to use style property.
You can see an example here : https://github.com/giraud/bs-css/blob/master/dev-server-dom/src/Comp.res.

But there are many other options for styling: Styling | React

I use emotion for styling my own components, but here i need just put object with styles to the side component.
i need to bind this function:

/**
 * @param {Object} provided -- the component's default styles
 * @param {Object} state -- the component's current state e.g. `isFocused`
 * @returns {Object}
 */
function styleFn(provided, state) {
  return { ...provided, color: state.isFocused ? 'blue' : 'red' };
}

i didn’t understood, how your link can help me.

If you don’t care too much about css property suggestions:

module Css = {
  type t

  external make: {..} => t = "%identity"
}

@val external styleFn: Css.t => Css.t = "styleFn"

Css.make({"color": "blue"})->styleFn->Js.log

you’d basically use any object value and force it into an Css.t type, then use that to type your styleFn.

and what if i care about css property suggestions?:slight_smile:

p.s. if it is not to much to ask:) maybe i can get some existing bindings?

Hey @fedodd,

IMHO there’s 2 inherit doubts in your question that are worth explaining here. Let me try and describe them, and if I’m over-explaining it please tell me. I’m unaware of your context and knowledge.

The prop styles in rescript-react is an opaque type and it can only be created with ReactDOM.Style.make() and passing the style declarations as labelled arguments + a last argument of unit. This is the implementation made by the react’s bindings, where neither a record or an object would fit in styles since you want a JavaScript Object while Records or Objects in ReScript will eventually convert to a massive JavaScript Object (since all non defined CSS properties will become null fields).

In your case, nothing that I explain matters! Since If I understand it correctly you want to bind to a function where a JS object mimics the style API. In your example, (and here is why I explained all the paragraph above) seems like you only want a few CSS declarations and don’t want ALL declarations.

It’s much easier to bind than any of the approaches above, and you will have safety:

type customStyles = {
  width: string
};

type selectStyles = {
  container: unit => customStyles
}

This will pass your binding perfectly since React JS expects an object and a record transforms to an object.

I am a beginner in rescript. And i gave not enough info about my question. sorry)

Thanks for all explaining. As I understand, you talk about inline styles.
My problem, that this object will concat with other basic styles inside this component with css-in-js @emotion/css

const customStyles = {
  container: (provided, state) => ({
    ...provided,
    padding: 20,
  }),

If i don’t pass provided props, this side component(react-select) overrides other basic styles.
I tried pass rescript object instead Record, but its the same result.

here link to component doc, maybe helps to understand what i mean or where i am wrong.

You can still type the return type by customStyles.container in 2 ways, objects or records. In objects, you would lose the possibility to ensure that keys are safe, while in records you will have that safety but will have to type all the record by hand.

For the record version I showcase the types here: https://rescript-lang.org/try?code=C4TwDgpgBAxgrgZ2AewLYGVQBsIKgXigG8AoASACNkAnAEwmoCFlgVUAuKJagSwDsA5gBoSUMbGRYanbv2GjxYAIa1aczv2AixZAO49awABYzgvQQrIB6K1AB0DkgF8A3CRKhIXYEuDQbBFAA-CHuntDwSGiYIDgIAGJ8gQAUkWwxcULevhAAlAQAfLCI6di4bh7g0EixuIGkYjA4StQAknxqML7SxVEYZQl82hJ8PvwMnGnRA4nDMMij1JKTJdO1g8O0S2C0yLp87Z3d1Ct9GbizCgJLcGCnpeuXYtfItwASECrqvQ9xT1D8I4oagIADCCzGfAmPzWfyGCkBPC6wPQEGU1GO91hF3hYn4YDgwCx-UeuKgUi+gkOSMxMJJcOGFLUggAsrgEEoBBBiecNgpUBA+HAeTMyQKhQAZHhIEWk4biuAABRoPiwsoZ-LgWGAPAAakosHBuXTef9UFqdfrDRAJUoKBA1SbRfKLXqDUaAEoQVDIABuxqm9Jxwz4yAA8mAdQsEGyEByuergwpkJGeAtE3yxGAsEoYBAjJJ6CcnXKFAg5DgrUaM-9fe6IODRkpxsXA6b4U4gA