Questions tagged [reason-react]

ReasonReact is the official Reason + BuckleScript bindings for ReactJS

ReasonReact (GitHub) is a set of opinionated + bindings for , developed as an open-source project by Facebook.

90 questions
3
votes
1 answer

How to conditionally set HTML attributes in JSX using reason-react?

I want to render an HTML checkbox whose checked state is controlled by data. Give a stateless component that receives an item type { label: string, checked: bool}, Like so: let component = ReasonReact.statelessComponent("TodoItem"); let make =…
Homan
  • 25,618
  • 22
  • 70
  • 107
3
votes
1 answer

How to compose props across component in reason-react bindings?

I am currently writing a material-UI reason-react binding and I want to know how I can re-use previously define Props. The Select component spreads all of the Input props into itself, in the underlying react-js lib. this is done by spreading props…
user465374
  • 1,521
  • 4
  • 20
  • 39
2
votes
0 answers

Does genType library supports generating types from typescript to rescript/reasonml?

I’m very new to reasonml/rescript community, What I know genType generates TS/flow types from rescript component while working in existing Typescript/flow codebase. Is there any other way around like I’m working on existing rescript codebase, does…
Vijay
  • 398
  • 5
  • 14
2
votes
1 answer

Using HTML Canvas from ReasonML using React Hooks

I'm looking for a quick example on how to get started using the following technologies together: HTML5 Canvas ReasonML ReasonReact: "ReasonReact is a safer, simpler way to build React components, in Reason." bs-webapi: Web API bindings for…
Peter Lamberg
  • 8,151
  • 3
  • 55
  • 69
2
votes
1 answer

Reason-react rendering list of items from json

I'm learning reason react and am having trouble rendering a list of items I'm fetching from a json api. let url = region => { "https://api.openbrewerydb.org/breweries?by_state=" ++ Js.String.replaceByRe([%re "/\\s/g"], "_",…
2
votes
1 answer

How to pattern match on a value of type React.Ref.t(Js.Nullable.t('a))

I'm trying to access the DOM element as a JS object. let navRef = React.useRef(Js.Nullable.null); let width = switch (Js.Nullable.toOption(navRef)) { | None => 0.0 | Some(nav) => ReactDOMRe.domElementToObj(nav)##clientWidth }; But…
Raphael Rafatpanah
  • 19,082
  • 25
  • 92
  • 158
2
votes
1 answer

How to pass a reserved keyword as a prop in reason-react

I am trying to use the rimble-ui ui-library, and one of the props that a button takes is called "as". This is unfortunately a reserved word in reason. So I don't know how to use this component in my reason-react app. Here are the docs for the…
JasoonS
  • 1,432
  • 3
  • 13
  • 26
2
votes
1 answer

received error message when using component

I am creating a website using ReasonReact, but I encounter this error message when using a normal component. Does anyone know what is happening? module Component1 = { let component = ReasonReact.statelessComponent("Component1"); let make = () =>…
Jack Ng
  • 473
  • 7
  • 14
2
votes
1 answer

De-structuring Mouse Move event in ReasonReact

Currently trying to pull clientX off a mouse move event in Reason React. Here is the component currently: type state = { count: int, hover: bool, mouseX: int, mouseY: int, }; type action = | Hover |…
2
votes
1 answer

Type variables in a simple component

Say I have this simple component type evt = | NoOp; type t('a) = 'a; let component = ReasonReact.reducerComponent("TestComponent"); let make = _children => { ...component, initialState: () => "hello", reducer: (evt, state: t('a)) => …
swelet
  • 8,192
  • 5
  • 33
  • 45
2
votes
1 answer

How can I share props in ReasonReact?

Summary Suppose I have a reducerComponent that uses statelessComponent Here todo is a record type called todoItem. type todoItem = { text: string, isDone: bool, }; But, I can't share todoItem type. If I define…
Mo...
  • 1,812
  • 2
  • 17
  • 22
2
votes
1 answer

Having trouble getting event data from event listener in ReasonReact

I'm trying to implement dynamic column resizing on a table (like in Excel or Google Sheets). In my render function I use the handle callback when the user clicks mouse down on my resize control:
Homan
  • 25,618
  • 22
  • 70
  • 107
2
votes
1 answer

How do you use environment variables in a ReasonReact app?

I tried adding a .env file to the root of my directory and I tried accessing the contents with [@bs.val] external graphqlUrl : string = "process.env.GRAPHQL_URL"; but it when I Js.log(graphqlUrl); it's undefined! .env…
John Paul Ada
  • 537
  • 5
  • 9
2
votes
1 answer

How to use refetchQueries with reason-apollo?

I'm using reason-apollo and having problems trying to setup refetchQueries. My setup is very similar to the swapi example here. I have a listing and a form to add a new item via a mutation. After the mutation succeeds, I want to refetch the items in…
rk1
  • 988
  • 9
  • 13
2
votes
1 answer

make and unnecessary callback creations and assignations (initialState...)?

I don't understand the way make work: let component = ReasonReact.reducerComponent("Greeting"); let make = (~name, _children) => { ...component, initialState: () => 0, /* here, state is an `int` */ render: (self) => { let greeting = …
Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419